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
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">
<!-- Logo -->
<a class="navbar-brand" href="#">
[logo]
</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">
<a class="nav-link" href="#">Dropdown Nav Item</a>
</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-link d-block text-start">
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/konsoka.svg" alt="Konsoka" width="150" height="40">
</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" aria-haspopup="true" aria-expanded="false">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" aria-haspopup="true" aria-expanded="false">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" aria-haspopup="true" aria-expanded="false">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="nav-link">Duis ut diam quam</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">Varius morbi</a>
</li>
</ul>
</div>
<div class="navbar-nav-mobile">
<a href="#" class="btn btn-sm btn-primary">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-link d-block text-start">Duis ut diam quam</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-link d-block text-start">Varius morbi</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
Navigation Example2
<nav class="kb-nav navbar kb-navbar-xl kb-nav-center-logo" ariaLabel="main" data-bs-theme="light">
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/konsoka.svg" alt="Konsoka" width="150" height="40">
</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" aria-haspopup="true" aria-expanded="false">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" aria-haspopup="true" aria-expanded="false">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" aria-haspopup="true" aria-expanded="false">Sem viverra aliquet</button>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item has-dropdown" data-content="nav_04_Items" aria-haspopup="true" aria-expanded="false">
<a href="#" class="nav-link">Duis ut diam quam</a>
</li>
<li class="nav-item">
<a href="#" class="btn btn-sm btn-primary">Varius morbi</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 id="nav_04_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_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">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav_04_ItemsMenu" aria-expanded="false" aria-controls="nav_04_ItemsMenu">
Duis ut diam quam
</button>
</div>
<div id="nav_04_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-link d-block text-start">Varius morbi</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->
Navigation Example3
<nav class="kb-nav navbar kb-navbar-lg kb-nav-center-logo bg-dark" ariaLabel="main" data-bs-theme="dark">
<div class="container-fluid">
<div class="nav-wrapper">
<a class="navbar-brand" href="#">
<img src="../../../../assets/img/konsoka.svg" alt="Konsoka" width="150" height="40">
</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" aria-haspopup="true" aria-expanded="false">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" aria-haspopup="true" aria-expanded="false">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 bg-dark"></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-link d-block text-start">Duis ut diam quam</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-link d-block text-start">Varius morbi</a>
</div>
</div>
</div>
</div>
</div>
<!-- Offcanvas Menu: END -->