Classic Menu
Explore the classic vertical menu of Nubra UI.
Basic example
Add data-layout="vertical" data-layout-style="default" data-menu="light" in wrapper class and use below snippet classic light menu.
<div class="hk-menu">
<!-- Brand -->
<div class="menu-header">
<span>
<span class="d-flex navbar-brand">
Brand
</span>
</span>
</div>
<!-- /Brand -->
<!-- Main Menu -->
<div data-simplebar class="nicescroll-bar">
<div class="menu-content-wrap">
<div class="menu-group">
<ul class="navbar-nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_1" aria-expanded="true">
<span class="nav-icon-wrap"><span class="feather-icon position-relative"><i data-feather="git-pull-request"></i></span></span>
<span class="nav-link-text">Navigation 1</span>
<span class="badge badge-soft-pink ms-auto">Trend</span>
</a>
<ul id="nav_menu_1" class="nav flex-column collapse nav-children show">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="nav-link-text">Option 1</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 2</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 3</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_2">
<span class="nav-icon-wrap position-relative"><span class="badge badge-sm badge-primary badge-sm badge-pill position-top-end-overflow">12</span><span class="feather-icon"><i data-feather="divide-square"></i></span></span>
<span class="nav-link-text">Navigation 2</span>
</a>
<ul id="nav_menu_2" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 4</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 5</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_3">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="compass"></i></span></span>
<span class="nav-link-text position-relative">Navigation 3</span>
</a>
<ul id="nav_menu_3" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 6</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 7</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 8</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_sub_menu_1">
<span class="nav-link-text">Sub Menu</span>
</a>
<ul id="nav_sub_menu_1" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 9</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 10</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-gap"></div>
<div class="menu-group">
<div class="nav-header">
<span>Foundations</span>
</div>
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_4">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="book"></i></span></span>
<span class="nav-link-text position-relative">Navigation 4<span class="badge badge-primary badge-indicator position-absolute top-0 start-100 ms-1 mt-1"></span></span>
</a>
<ul id="nav_menu_4" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option11</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option12</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option13</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_5">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="tool"></i></span></span>
<span class="nav-link-text">Navigation 5</span><span class="badge badge-soft-success ms-2">10</span>
</a>
<ul id="nav_menu_5" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option14</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option15</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Main Menu -->
</div>
Menu dark
Add data-layout="vertical" data-layout-style="default" data-menu="dark" in wrapper class and use below snippet classic dark menu.
<div class="hk-menu">
<!-- Brand -->
<div class="menu-header">
<span>
<span class="d-flex navbar-brand">
Brand
</span>
</span>
</div>
<!-- /Brand -->
<!-- Main Menu -->
<div data-simplebar class="nicescroll-bar">
<div class="menu-content-wrap">
<div class="menu-group">
<ul class="navbar-nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_dark_1" aria-expanded="true">
<span class="nav-icon-wrap"><span class="feather-icon position-relative"><i data-feather="git-pull-request"></i></span></span>
<span class="nav-link-text">Navigation 1</span>
<span class="badge badge-soft-pink ms-auto">Trend</span>
</a>
<ul id="nav_menu_dark_1" class="nav flex-column collapse nav-children show">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#"><span class="nav-link-text">Option 1</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 2</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 3</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_dark_2">
<span class="nav-icon-wrap position-relative"><span class="badge badge-sm badge-primary badge-sm badge-pill position-top-end-overflow">12</span><span class="feather-icon"><i data-feather="divide-square"></i></span></span>
<span class="nav-link-text">Navigation 2</span>
</a>
<ul id="nav_menu_dark_2" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 4</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 5</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_dark_3">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="compass"></i></span></span>
<span class="nav-link-text position-relative">Navigation 3</span>
</a>
<ul id="nav_menu_dark_3" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 6</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 7</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 8</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_sub_menu_dark_1">
<span class="nav-link-text">Sub Menu</span>
</a>
<ul id="nav_sub_menu_dark_1" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 9</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 10</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-gap"></div>
<div class="menu-group">
<div class="nav-header">
<span>Foundations</span>
</div>
<ul class="navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_dark_4">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="book"></i></span></span>
<span class="nav-link-text position-relative">Navigation 4<span class="badge badge-primary badge-indicator position-absolute top-0 start-100 ms-1 mt-1"></span></span>
</a>
<ul id="nav_menu_dark_4" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option11</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option12</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option13</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" data-bs-toggle="collapse" data-bs-target="#nav_menu_dark_5">
<span class="nav-icon-wrap"><span class="feather-icon"><i data-feather="tool"></i></span></span>
<span class="nav-link-text">Navigation 5</span><span class="badge badge-soft-success ms-2">10</span>
</a>
<ul id="nav_menu_dark_5" class="nav flex-column collapse nav-children">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option14</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option15</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Main Menu -->
</div>