Utility Navigation
Utility navigation consists of secondary actions and tools that play a crucial role in enhancing the overall user experience on a website.
Navigation Properties
Navigation container justification [NAV_ITEMS_JUSTIFY]
Allows for justification of the primary and secondary navigation containers
.justify-content-start- The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
.justify-content-end- The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
.justify-content-center- The items are packed flush to each other toward the center of the alignment container along the main axis.
.justify-content-between- The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
.justify-content-around- The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items. If there is only one item, it will be centered.
.justify-content-evenly- The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.
.justify-content-split- First item in navigation in left aligned, all the following navigation items will be right aligned.
Navigation 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
Nav item hide on mobile[HIDE_MOBILE]
Use .hide-mobile to hide nav items based on chosen Navigation toggle size
Template
<nav class="kb-nav navbar" ariaLabel="main">
<div class="kb-user-nav">
<div class="[NAV_CONTAINER]">
<ul class="navbar-nav navbar-nav-user [NAV_ITEMS_JUSTIFY]">
<li class="nav-item [HIDE_MOBILE]">
<!-- Image Item -->
<img class="kb-user-nav-img" src="/path/to/image" alt="Image alt description" loading="lazy">
<!-- Link Item -->
<a href="linkUrl" class="nav-link">linkText </a>
<!-- Social Item -->
<a href="linkUrl" class="nav-link">
<span class="fa-brands fa-pinterest" aria-hidden="true"></span>
<span class="visually-hidden">Visit Pinterest page</span>
</a>
</li>
</ul>
</div>
</div>
<!-- Main navigation component -->
</nav>
Utility Navigation Example 1
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-xxl">
<ul class="navbar-nav navbar-nav-user justify-content-split">
<li class="nav-item hide-mobile">
<img class="kb-user-nav-img" src="../../../../assets/img/konsoka-logo-light.png" alt="User nav image" loading="lazy">
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</div>
</div>
<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-start">
<li class="nav-item">
<a href="#" class="nav-link">Main Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 3</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">CTA Button</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>
<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">
<a href="#" class="btn btn-accordion-link">Main Link 1</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 2</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 3</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 -->
Utility Navigation Example 2
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-xxl">
<ul class="navbar-nav navbar-nav-user justify-content-split">
<li class="nav-item">
<img class="kb-user-nav-img" src="../../../../assets/img/konsoka-logo-light.png" alt="User nav image" loading="lazy">
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">
<span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Visit Facebook page</span>
</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">
<span class="fa-brands fa-linkedin" aria-hidden="true"></span><span class="visually-hidden">Visit LinkedIn page</span>
</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">
<span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Visit Instagram page</span>
</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">
<span class="fa-brands fa-houzz" aria-hidden="true"></span><span class="visually-hidden">Visit Houzz page</span>
</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">
<span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">Visit X Twitter page</span>
</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">
<span class="fa-brands fa-pinterest" aria-hidden="true"></span><span class="visually-hidden">Visit Pinterest page</span>
</a>
</li>
</ul>
</div>
</div>
<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-start">
<li class="nav-item">
<a href="#" class="nav-link">Main Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 3</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">CTA Button</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>
<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">
<a href="#" class="btn btn-accordion-link">Main Link 1</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 2</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 3</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 -->
Utility Navigation Example 3
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-xxl">
<ul class="navbar-nav navbar-nav-user justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">Link 3</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">Link 4</a>
</li>
</ul>
</div>
</div>
<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-start">
<li class="nav-item">
<a href="#" class="nav-link">Main Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 3</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">CTA Button</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>
<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">
<a href="#" class="btn btn-accordion-link">Main Link 1</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 2</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 3</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 -->
Utility Navigation Example 4
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-xxl">
<ul class="navbar-nav navbar-nav-user justify-content-end">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">Link 3</a>
</li>
<li class="nav-item hide-mobile">
<a href="#" class="nav-link">Link 4</a>
</li>
</ul>
</div>
</div>
<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-start">
<li class="nav-item">
<a href="#" class="nav-link">Main Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 3</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">CTA Button</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>
<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">
<a href="#" class="btn btn-accordion-link">Main Link 1</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 2</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 3</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 -->
Utility Navigation Example 5
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-xxl">
<ul class="navbar-nav navbar-nav-user justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Visit Facebook page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-linkedin" aria-hidden="true"></span><span class="visually-hidden">Visit LinkedIn page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Visit Instagram page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-houzz" aria-hidden="true"></span><span class="visually-hidden">Visit Houzz page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">Visit X Twitter page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-pinterest" aria-hidden="true"></span><span class="visually-hidden">Visit Pinterest page</span>
</a>
</li>
</ul>
</div>
</div>
<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-start">
<li class="nav-item">
<a href="#" class="nav-link">Main Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 3</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">CTA Button</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>
<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">
<a href="#" class="btn btn-accordion-link">Main Link 1</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 2</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 3</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 -->
Utility Navigation Example 6
<nav class="kb-nav navbar kb-navbar-xl bg-light" ariaLabel="main" data-bs-theme="light">
<div class="kb-user-nav">
<div class="container-xxl">
<ul class="navbar-nav navbar-nav-user justify-content-end">
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Visit Facebook page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-linkedin" aria-hidden="true"></span><span class="visually-hidden">Visit LinkedIn page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Visit Instagram page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-houzz" aria-hidden="true"></span><span class="visually-hidden">Visit Houzz page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">Visit X Twitter page</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<span class="fa-brands fa-pinterest" aria-hidden="true"></span><span class="visually-hidden">Visit Pinterest page</span>
</a>
</li>
</ul>
</div>
</div>
<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-start">
<li class="nav-item">
<a href="#" class="nav-link">Main Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Main Link 3</a>
</li>
</ul>
<ul class="navbar-nav navbar-nav-secondary justify-content-end">
<li class="nav-item">
<a href="#" class="btn btn-sm btn-outline-primary">CTA Button</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>
<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">
<a href="#" class="btn btn-accordion-link">Main Link 1</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 2</a>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header">
<a href="#" class="btn btn-accordion-link">Main Link 3</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 -->