Horizontal Menu
Explore the horizontal menu of Nubra UI.
Basic example
Add data-layout="horizontal" data-layout-style="default" data-menu="light" in wrapper class and use below snippet Horizontal light menu.
<div class="hk-menu">
<!-- 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">
<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-2">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">
<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>
<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">Navigation 4</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">Option 11</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 12</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 13</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Main Menu -->
</div>
Menu dark
Add data-layout="horizontal" data-layout-style="default" data-menu="dark" in wrapper class and use below snippet Horizontal dark menu.
<div class="hk-menu">
<!-- 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">
<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-2">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">
<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_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>
<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">Navigation 4</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">Option 11</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 12</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-link-text">Option 13</span></a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /Main Menu -->
</div>