Navbar
Powerful and responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for the collapse plugin.
Bootstrap Navbar documentationHow to use
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="../assets/vendor/hs-header/dist/hs-header.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF NAVBAR
// =======================================================
new HSHeader('#header').init()
})()
</script>
Using mega menu with header
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF MEGA MENU
// =======================================================
const megaMenu = new HSMegaMenu('.js-mega-menu')
})()
</script>
Basic
Choose from .navbar-light
for use with light background colors, or .navbar-dark
for dark background colors.
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-end mb-3">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenu">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenu">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubMenu" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="megaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="megaMenu">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-end navbar-light bg-white mb-3">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuLightEg" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLightEg">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuLightEg">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenuLightEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubMenuLightEg" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="megaMenuLightEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="megaMenuLightEg">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-end navbar-dark bg-primary">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo-white.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuDark" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuDark">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuDark">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownSubMenuDarkEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubMenuDarkEg" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="megaMenuDarkEg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="megaMenuDarkEg">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
Height
Use .navbar-height
for fixed height navbar.
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-end mb-3">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuHeight" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuHeight">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuHeight">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarHeightDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarHeightDropdownSubMenu" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarHeightMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarHeightMegaMenu">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
Shadow
Use .navbar-shadow
to add shadow.
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuShadow" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuShadow">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuShadow">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarShadowDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarShadowDropdownSubMenu" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarShadowMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarShadowMegaMenu">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
Navbar alignments
By default, navbars are left aligned.
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuLeftAligned" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuLeftAligned">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuLeftAligned">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarLeftAlignedDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarLeftAlignedDropdownSubMenu" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarLeftAlignedMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarLeftAlignedMegaMenu">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
Use .navbar-end
class to right align the navbar
<!-- Header -->
<header class="navbar navbar-expand-lg navbar-shadow navbar-end mb-3">
<div class="container">
<div class="navbar-nav-wrap">
<div class="navbar-brand-wrapper">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
</div>
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuRightAligned" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuRightAligned">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuRightAligned">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarRightAlignedDropdownSubMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="navbarRightAlignedDropdownSubMenu" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="navbarRightAlignedMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">Mega menu</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarRightAlignedMegaMenu">
<div class="row">
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-lg-3 mb-3 mb-lg-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
</div>
<div class="col-lg-3">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
</div>
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
With hs-mega-menu.js
Want to add show/hide animations or change the event type to hover
? hs-mega-menu.js
is the way to do them and many more.
<!-- Header -->
<header class="docs-navbar navbar navbar-expand-lg navbar-end navbar-light bg-white">
<div class="container">
<div class="js-mega-menu navbar-nav-wrap">
<!-- Logo -->
<a class="navbar-brand" href="../index.html" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Logo -->
<!-- Toggle -->
<button type="button" class="navbar-toggler ms-auto" data-bs-toggle="collapse" data-bs-target="#navbarNavMenuWithMegaMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarNavMenuWithMegaMenu">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggle -->
<nav class="navbar-nav-wrap-col collapse navbar-collapse" id="navbarNavMenuWithMegaMenu">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<!-- Dropdown -->
<li class="hs-has-sub-menu nav-item">
<a class="hs-mega-menu-invoker nav-link dropdown-toggle" href="javascript:;" id="headerWithMegaMenuDropdown" role="button" aria-expanded="false">Dropdown</a>
<!-- Mega Menu -->
<div class="hs-sub-menu dropdown-menu" aria-labelledby="headerWithMegaMenuDropdown" style="min-width: 12rem;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<!-- Dropdown -->
<div class="hs-has-sub-menu">
<a class="hs-mega-menu-invoker dropdown-item dropdown-toggle" href="javascript:;" id="navbarWithMegaMenuDropdownSub" role="button" aria-expanded="false">Sub dropdown</a>
<div class="hs-sub-menu dropdown-menu" aria-labelledby="navbarWithMegaMenuDropdownSub" style="min-width: 230px;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<!-- End Dropdown -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Dropdown -->
<!-- Nav Item -->
<li class="hs-has-mega-menu nav-item">
<a class="hs-mega-menu-invoker nav-link dropdown-toggle" href="javascript:;" id="navbarWithMegaMenu" role="button" aria-expanded="false">Mega menu</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu w-100" aria-labelledby="navbarWithMegaMenu">
<!-- Main Content -->
<div class="navbar-dropdown-menu-inner">
<div class="row">
<div class="col-sm-6 col-md">
<span class="dropdown-header">One</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<span class="dropdown-header">Two</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-sm-6 col-md mb-3 mb-md-0">
<span class="dropdown-header">Three</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
<div class="col-sm-6 col-md">
<span class="dropdown-header">Four</span>
<a class="dropdown-item" href="#">One</a>
<a class="dropdown-item" href="#">Two</a>
<a class="dropdown-item" href="#">Three</a>
</div>
</div>
<!-- End Row -->
</div>
<!-- End Main Content -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Nav Item -->
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- End Navbar -->
</nav>
</div>
</div>
</header>
<!-- End Header -->
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<script>
(function() {
// INITIALIZATION OF MEGA MENU
// =======================================================
var megaMenu = new HSMegaMenu($('.js-mega-menu'), {
desktop: {
position: 'left'
}
}).init();
});
</script>
Vertical
Create a vertical navigation with .navbar-vertical
.
<!-- Navbar Vertical -->
<div class="navbar navbar-vertical" style="max-width: 16rem;">
<!-- Navbar -->
<ul class="navbar-nav navbar-nav-lg nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- End Navbar -->
</div>
<!-- End Navbar Vertical -->
Toggler
Navbar will be collapsed below medium size resolution. Reduce browser size to see it in action.
<!-- Navbar Vertical -->
<div class="navbar navbar-vertical navbar-expand-md">
<!-- Navbar Toggle -->
<div class="d-grid flex-grow-1">
<button type="button" class="navbar-toggler btn btn-white" data-bs-toggle="collapse" data-bs-target="#navbarTogglerNavMenu" aria-label="Toggle navigation" aria-expanded="false" aria-controls="navbarTogglerNavMenu">
<span class="d-flex justify-content-between align-items-center">
<span>Nav menu</span>
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</span>
</button>
</div>
<!-- End Navbar Toggle -->
<div id="navbarTogglerNavMenu" class="collapse navbar-collapse">
<!-- Navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<!-- End Navbar -->
</div>
</div>
<!-- End Navbar Vertical -->
Responsive behaviors
Placement classes can utilize .navbar-*{-sm|-md|-lg|-xl}
. Learn more placement behaviors.
Navbars can utilize .navbar-toggler
, .navbar-collapse
, and .navbar-expand{-sm|-md|-lg|-xl}
classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand
class on the navbar. For navbars that always collapse, don't add any .navbar-expand
class.
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-header-options='{}'
.
Parameters | Description | Default value |
---|---|---|
|
The distance after which the js-navbar-fix-moment class will be added to the initialized element, which initializes the animation specified in fixEffect |
0 |
|
If the header contains elements with the class navbar-section, then it adds the classes specified in
Otherwise, it searches for the given parameter in data-hs-header-options and adds classes to the header. These classes are added when the scroll value is greater than or equal to the value in fixMoment
|
null |
|
If the header contains elements with the class navbar-section , then removes the classes specified in the elements
Otherwise, it looks for this parameter in data-hs-header-options and removes the classes from the header. These classes are deleted when the scroll value is greater than or equal to the value in fixMoment
|
null |
|
Determines with what effect the initialized element disappears. There are 2 options: slide , fade |
'slide' |
|
Determines with what permission the plugin is initialized. | 'lg' |
Placement classes
List of available classes and their descriptions.
Parameters | Description |
---|---|
|
Practically the same as static, but the geometry of this type of header is not taken into account when rendering the page (because of position: absolute; ). This type of header is well suited for transparent/half-transparent header designs that are displayed on top of the slider/hero/etc. Its geometry is taken into account when rendering a page. |
|
It is displayed as sticking to the top of the screen always (position: fixed; top: 0; ). The geometry of this header is also excluded from the calculation of the positioning of all elements on the page. |
Behaviors
List of available classes and their descriptions.
Parameters | Description |
---|---|
|
Show/hide an item when scrolling to the user specified time. This moment is given in the form of the number of scrolled pixels, through the attribute data-navbar-fix-moment="" . There are 3 available options for how to show/hide an element using the data-navbar-fix-effect="" attribute:
|
|
Show/hide one of the header sections (preferably the very first) at the user specified time. This moment is specified as the number of scrolled pixels, through the attribute data-navbar-fix-moment="" . For this, the section itself needs to be given the class .navbar-section-hidden . |
|
This class is auxiliary and is used to reset the previous behavior (with the previous permission, if the user has changed the window size) on a certain viewport. For example, if the user wants to open/show a section on -xs, -sm , but not higher. (Because Front alike Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.), having set -sm it will work and on permissions above, in order to prevent it use this class.For example:
here the behavior of toggle-section will work until the resolution is -md (that is, xs, sm) , on viewport -md it will not work.
|
Behavior examples
These placement classes can have the following behavior classes | Description |
---|---|
|
|
|
|