Navbar Menu
Explore the Navbar menu of Nubra UI.
Basic example
Add data-layout="navbar" data-layout-style="default" in wrapper class and use below snippet Horizontal light menu.
<!-- Top Navbar -->
<nav class="hk-navbar navbar navbar-expand-xl navbar-light">
<div class="container-fluid">
<!-- Start Nav -->
<div class="nav-start-wrap flex-fill">
<div class="menu-header">
<span class="d-flex align-items-center">
<span class="d-flex navbar-brand me-2">
Brand
</span>
</span>
</div>
<!-- Navbar Nav -->
<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">Nav 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">Nav 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">Nav 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">Nav 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>
<!-- /Navbar Nav -->
</div>
<!-- /Start Nav -->
<!-- End Nav -->
<div class="nav-end-wrap">
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
</li>
<li class="nav-item">
<a href="email.html" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover"><span class="icon"><span class=" position-relative"><span class="feather-icon"><i data-feather="inbox"></i></span><span class="badge badge-sm badge-soft-primary badge-sm badge-pill position-top-end-overflow-1">4</span></span></span></a>
</li>
<li class="nav-item">
<div class="dropdown ps-2">
<a class="" href="#">
<div class="avatar avatar-rounded avatar-sm">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
</div>
</a>
</div>
</li>
</ul>
</div>
<!-- /End Nav -->
</div>
</nav>
<!-- /Top Navbar -->
Menu dark
Add data-layout="horizontal" data-layout-style="default" data-menu="dark" in wrapper class and use below snippet Horizontal dark menu.
<!-- Top Navbar -->
<nav class="hk-navbar navbar navbar-expand-xl navbar-dark position-relative start-0 top-0">
<div class="container-fluid">
<!-- Start Nav -->
<div class="nav-start-wrap flex-fill">
<div class="menu-header">
<span class="d-flex align-items-center">
<span class="d-flex navbar-brand me-2">
Brand
</span>
</span>
</div>
<!-- Navbar Nav -->
<div class="hk-menu hk-menu-navbar-example hk-menu-dark-example position-relative start-0 top-0 border-0">
<!-- 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">Nav 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">Nav 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">Nav 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>
<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">Nav 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>
<!-- /Navbar Nav -->
</div>
<!-- /Start Nav -->
<!-- End Nav -->
<div class="nav-end-wrap">
<ul class="navbar-nav flex-row">
<li class="nav-item">
<a href="#" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover"><span class="icon"><span class="feather-icon"><i data-feather="moon"></i></span></span></a>
</li>
<li class="nav-item">
<a href="email.html" class="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover"><span class="icon"><span class=" position-relative"><span class="feather-icon"><i data-feather="inbox"></i></span><span class="badge badge-sm badge-soft-primary badge-sm badge-pill position-top-end-overflow-1">4</span></span></span></a>
</li>
<li class="nav-item">
<div class="dropdown ps-2">
<a class="" href="#">
<div class="avatar avatar-rounded avatar-sm">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
</div>
</a>
</div>
</li>
</ul>
</div>
<!-- /End Nav -->
</div>
</nav>
<!-- /Top Navbar -->