Main Navigation
Main navigation contained within the header
Navigation Properties
Background Color [NAV_BG_COLOR]
Set the background of an element to any color theme class. Background utilities do not set text or link colors.
.bg-white$whitebackground color.bg-light$lightbackground color.bg-dark$darkbackground color.bg-black$blackbackground color.bg-accent1$accent1background color.bg-accent2$accent2background color.bg-accent3$accent3background color.bg-none- transparent background color
Link Theme data-bs-theme="[LINK_THEME]"
Set a minimum height for the entire header based on the height of the viewport.
light- Dark colored links for use against light background colors
dark- Light colored links for use against dark background colors
Navbar Postion [NAV_POSITION]
Optional positioning of the navbar.
.fixed-top- Position the navbar pinned at the top of the viewport above the content
Navbar Layout [NAV_LAYOUT]
Optional Alternative nav layouts
.kb-nav-center-logo- Positions the logo between the primary and secondary navigation containers.
Fluid Container [NAV_CONTAINER]
Use .container-fluid for a full width container, spanning the entire width of the viewport
.container-xxl- Standard width, fluid contrainer
.container-fluid- Full width section contrainer
Navigation toggle size [NAV_DISPLAY_SIZE]
Breakpoint size to show full desktop menu. Values: sm, md, lg, xl, xxl
.kb-navbar-sm- Show full navigation at $sm breakpoint
.kb-navbar-md- Show full navigation at $md breakpoint
.kb-navbar-lg- Show full navigation at $lg breakpoint
.kb-navbar-xl- Show full navigation at $xl breakpoint
.kb-navbar-xxl- Show full navigation at $xxl breakpoint
Navigation container justification [NAV_ITEMS_JUSTIFY]
Allows for justification of the primary and secondary navigation containers
.justify-content-start- Align navigation items to the left
.justify-content-end- Align navigation items to the right
.justify-content-center- Align navigation items to the center
Optional dropdown width style="--kb-nav-dropdown-width: [DROPDOWN_WIDTH];"
Optionally set each individual dropdown width. Accepts rem values. Defaults to 15rem if inline style is not present.
Template
<nav class="kb-nav navbar [NAV_DISPLAY_SIZE] [NAV_LAYOUT] [NAV_POSITION] [NAV_BG_COLOR]" ariaLabel="main" data-bs-theme="[LINK_THEME]">
<!-- Main navigation wrapper -->
<div class="[NAV_CONTAINER]">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<!-- Moble logo -->
<img src="mobile-logo.png" class="brand-img-sm" alt="Konsoka" width="150" height="40">
<!-- Desktop logo -->
<img src="desktop-logo.png" class="brand-img-lg" alt="Konsoka" width="150" height="40">
</a>
<!-- Primary navigation container -->
<ul class="navbar-nav navbar-nav-primary [NAV_ITEMS_JUSTIFY]">
<li class="nav-item">
<a class="nav-link" href="#">Nav Item</a>
</li>
<li class="nav-item has-dropdown" data-content="[DROPDOWN_ID]" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Dropdown Nav Item</button>
</li>
</ul>
<!-- Secondary navigation container -->
<ul class="navbar-nav navbar-nav-secondary [NAV_ITEMS_JUSTIFY]">
<li class="nav-item">
<a class="nav-link" href="#">Nav Item</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">CTA Item</a>
</li>
</ul>
</div>
<!-- Navigation Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- Desktop dropdown content -->
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="[DROPDOWN_ID]" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: [DROPDOWN_WIDTH]">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Nav Item</a>
</li>
</ul>
</div>
</div>
<div class="bg-layer [NAV_BG_COLOR]"></div>
</div>
</div>
<!-- Mobile navigation content -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">
Nav Item
</a>
</div>
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#[DROPDOWN_ID]Menu" aria-expanded="false" aria-controls="[DROPDOWN_ID]Menu">
Dropdown Nav Item
</button>
</div>
<div id="[DROPDOWN_ID]Menu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
Child Nav Item
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
Navigation Example1
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-start">
<li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Fermentum odio feugiat</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Nulla facilisi</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">CTA Button</a>
</li>
</ul>
</div>
<div class="navbar-nav-mobile">
<a href="#" class="btn btn-cta btn-sm">Mobile CTA</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_01_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
<div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-layer bg-light"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
Fermentum odio feugiat
</button>
</div>
<div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Nulla facilisi
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
Sem viverra aliquet
</button>
</div>
<div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
Navigation Example2
<nav class="kb-nav navbar kb-navbar-xl kb-nav-center-logo bg-light" ariaLabel="main" data-bs-theme="light">
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-start">
<li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Fermentum odio feugiat</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Nulla facilisi</button>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Lorem Ipsum</a>
</li>
<li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">CTA Button</a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_01_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
<div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-layer bg-light"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
Fermentum odio feugiat
</button>
</div>
<div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Nulla facilisi
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Lorem Ipsum</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
Sem viverra aliquet
</button>
</div>
<div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
Navigation Example3
<nav class="kb-nav navbar kb-navbar-lg kb-nav-center-logo" ariaLabel="main" data-bs-theme="dark">
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-end">
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Nulla facilisi</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-start">
<li class="nav-item">
<a href="#" class="nav-link">Duis ut diam quam</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Varius morbi</a>
</li>
</ul>
</div>
<div class="navbar-nav-mobile">
<a href="#" class="btn btn-sm btn-outline-light">Mobile CTA</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
<div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-layer"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Nulla facilisi
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
Sem viverra aliquet
</button>
</div>
<div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Duis ut diam quam</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Varius morbi</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
Navigation Example4
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-center">
<li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Fermentum odio feugiat</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Nulla facilisi</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_03_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">CTA Button</a>
</li>
</ul>
</div>
<div class="navbar-nav-mobile">
<a href="#" class="btn btn-cta btn-sm">Mobile CTA</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_01_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
<div id="nav_03_Items" class="nav-dropdown" aria="hidden" style="--kb-nav-dropdown-width: 10rem">
<div class="content">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-layer bg-light"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
Fermentum odio feugiat
</button>
</div>
<div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Nulla facilisi
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_03_ItemsMenu" aria-expanded="false" aria-controls="nav_03_ItemsMenu">
Sem viverra aliquet
</button>
</div>
<div id="nav_03_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
Navigation MegaNav
<nav class="kb-nav kb-nav-mega navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="container-xxl">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
<img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
</a>
<ul class="navbar-nav navbar-nav-primary justify-content-center">
<li class="nav-item has-dropdown" data-content="nav_01_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Fermentum odio feugiat</button>
</li>
<li class="nav-item has-dropdown" data-content="nav_02_Items" aria-haspopup="true" aria-expanded="false">
<button class="nav-link" type="button">Nulla facilisi</button>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Sem viverra aliquet</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-cta">CTA Button</a>
</li>
</ul>
</div>
<div class="navbar-nav-mobile">
<a href="#" class="btn btn-sm btn-cta">Mobile CTA</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="dropdown-bar">
<div class="dropdown-list">
<div class="dropdown-content">
<div id="nav_01_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<div class="container-xxl">
<div class="row">
<div class="col-3">
<a class="nav-link nav-sublink dropdown-link"
href="#nav_01_subItems_01"
data-bs-toggle="collapse"
aria-expanded="true"
aria-controls="nav_01_subItems_01">
Vel interdum purus <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
<a class="nav-link nav-sublink dropdown-link collapsed"
href="#nav_01_subItems_02"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="nav_01_subItems_02">
rcu senectus inceptos <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Aptent at nascetur sollicitudin</a>
</div>
<div class="col-3">
<div class="collapse nav-collapse show" id="nav_01_subItems_01" data-bs-parent="#nav_01_Items">
<a class="nav-link nav-sublink dropdown-link" href="#">Sollicitudin tempor</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Congue aptent sociosqu</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Proin fermentum</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Fringilla molestie efficitur</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Eu consequat fermentum</a>
</div>
<div class="collapse nav-collapse" id="nav_01_subItems_02" data-bs-parent="#nav_01_Items">
<a class="nav-link nav-sublink dropdown-link" href="#">Eleifend volutpat sem</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Curae ultrices lacus</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Ut parturient varius</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Ut bibendum a non tellus</a>
</div>
</div>
<div class="col-6">
<div class="row gy-3">
<div class="col-xl-6">
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Ultrices imperdiet quam donec vehicula quis dolor quam iaculis.</p>
<a href="#" class="btn btn-primary btn-sm dropdown-link">CTA Button</a>
</div>
<div class="col-xl">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-8-5@md.jpg" alt="alt">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="nav_02_Items" class="nav-dropdown" aria="hidden">
<div class="content">
<div class="container-xxl">
<div class="row">
<div class="col-3">
<a class="nav-link nav-sublink dropdown-link" href="#">Ultricies diam nulla</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Vulputate ad donec pretium</a>
<a class="nav-link nav-sublink dropdown-link collapsed"
href="#nav_02_subItems_01"
data-bs-toggle="collapse"
aria-expanded="false"
aria-controls="nav_02_subItems_01">
Facilisis cras lobortis montes <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Ut curae diam efficitur sapien</a>
</div>
<div class="col-3">
<div class="collapse nav-collapse" id="nav_02_subItems_01" data-bs-parent="#nav_02_Items">
<a class="nav-link nav-sublink dropdown-link" href="#">Elit phasellus molestie elementum</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Nascetur pulvinar quam vulputate vestibulum sodales</a>
<a class="nav-link nav-sublink dropdown-link" href="#">Metus nisi finibu</a>
</div>
</div>
<div class="col-6">
<div class="row gy-3">
<div class="col-xl-6">
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Ultrices imperdiet quam donec vehicula quis dolor quam iaculis.</p>
<a href="#" class="btn btn-primary btn-sm dropdown-link">CTA Button</a>
</div>
<div class="col-xl">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-8-5@md.jpg" alt="alt">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-layer bg-light"></div>
</div>
</div>
</nav>
<!-- Offcanvas Menu: BEGIN -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
<div class="offcanvas-header">
<button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush" id="accordionNavItems">
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_01_ItemsMenu" aria-expanded="false" aria-controls="nav_01_ItemsMenu">
Fermentum odio feugiat
</button>
</div>
<div id="nav_01_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<span class="mobile-heading">Vel interdum purus</span>
<ul class="nav flex-column nav-mobile">
<li class="nav-item">
<a class="nav-link" href="#">Sollicitudin tempor</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Congue aptent sociosqu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Proin fermentum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Fringilla molestie efficitur</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Eu consequat fermentum</a>
</li>
</ul>
</li>
<li class="nav-item">
<span class="mobile-heading">rcu senectus inceptos</span>
<ul class="nav flex-column nav-mobile">
<li class="nav-item">
<a class="nav-link" href="#">Eleifend volutpat sem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Curae ultrices lacus</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ut parturient varius</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ut bibendum a non tellus</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Aptent at nascetur sollicitudin</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_02_ItemsMenu" aria-expanded="false" aria-controls="nav_02_ItemsMenu">
Nulla facilisi
</button>
</div>
<div id="nav_02_ItemsMenu" class="accordion-collapse collapse" data-bs-parent="#accordionNavItems">
<div class="accordion-body">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Ultricies diam nulla</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vulputate ad donec pretium</a>
</li>
<li class="nav-item">
<span class="mobile-heading">Facilisis cras lobortis montes</span>
<ul class="nav flex-column nav-mobile">
<li class="nav-item">
<a class="nav-link" href="#">Elit phasellus molestie elementum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nascetur pulvinar quam vulputate vestibulum sodales</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Metus nisi finibu</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ut curae diam efficitur sapien</a>
</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Sem viverra aliquet</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">CTA Button</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->