Header Mega Menu
Documentation and examples for Front's powerful, and responsive navigation mega menu.
How it works
Here's what you need to know before getting started with the mega menu:
- Mega menu requires a wrapping
.js-mega-menu(or any other ID or class which you can replace with) along with.navbarclass. .hs-has-mega-menu- is a parent class that contains sub-elements within it..hs-mega-menu- is a child class that contains a container for the mega menu.- Mega menus are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our
hs-megamenuJavaScript plugin.
How to use?
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>
$(document).on('ready', function () {
// INITIALIZATION OF HEADER
// =======================================================
var header = new HSHeader($('#header')).init();
// INITIALIZATION OF MEGA MENU
// =======================================================
var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();
});
</script>
Basic
<header class="header left-aligned-navbar">
<!-- Nav -->
<nav class="js-mega-menu-basic navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="basicNavBar"
data-toggle="collapse"
data-target="#basicNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="basicNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="basicMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Basic mega menu</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="basicMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm-3">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Columns
You might need to adjust the size width of the mega menu, when using less columns or when the content of the container is less. Set maximum width via data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": ""
}
}' attribute.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-columns navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="columnsNavBar"
data-toggle="collapse"
data-target="#columnsNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="columnsNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "400px"
}
}'>
<a id="twoColumnsMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">2 Columns</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="twoColumnsMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm-6 mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-6">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "500px"
}
}'>
<a id="threeColumnsMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">3 Columns</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="threeColumnsMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm-4 mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-4 mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-4">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="fourColumnsMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">4 Columns</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="fourColumnsMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm-3">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="fiveColumnsMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">5 Columns</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="fiveColumnsMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm">
<span class="d-block h5">Five</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Interactive styles
These are some custom styles with interactive contents.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-interactive-1 navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="interactiveNavBar1"
data-toggle="collapse"
data-target="#interactiveNavBar1">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="interactiveNavBar1" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="interactiveMegaMenu1" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Promo block and Links</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="interactiveMegaMenu1">
<div class="row no-gutters">
<div class="col-lg-6">
<!-- Banner Image -->
<div class="navbar-banner" style="background-image: url(...);">
<div class="navbar-banner-content">
<div class="mb-4">
<span class="d-block h2 text-white">Branding Works</span>
<p class="text-white">Experience a level of our quality in both design & customization works.</p>
</div>
<a class="btn btn-primary btn-sm transition-3d-hover" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
<!-- End Banner Image -->
</div>
<div class="col-lg-6">
<div class="mega-menu-body">
<div class="row">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm-3">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-interactive-2 navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="interactiveNavBar2"
data-toggle="collapse"
data-target="#interactiveNavBar2">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="interactiveNavBar2" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Interactive Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "440px"
}
}'>
<a id="interactiveMegaMenu2" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Product block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="interactiveMegaMenu2">
<div class="mega-menu-body">
<span class="d-block h5">Shop Elements</span>
<div class="row">
<div class="col-sm-6">
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-6">
<div class="mb-3">
<a class="dropdown-item px-0" href="#">Four</a>
<a class="dropdown-item px-0" href="#">Five</a>
</div>
</div>
</div>
</div>
<!-- Mega Menu Banner -->
<div class="navbar-product-banner">
<div class="d-flex align-items-end">
<img class="img-fluid mr-4" src="../assets/img/mockups/img4.png" alt="Image Description">
<div class="navbar-product-banner-content">
<div class="mb-4">
<span class="navbar-product-banner-title">Win T-shirt</span>
<p class="navbar-product-banner-text">Win one of our Front brand T-shirts.</p>
</div>
<a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">Learn More <i class="fas fa-angle-right fa-sm ml-1"></i></a>
</div>
</div>
</div>
<!-- End Mega Menu Banner -->
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-interactive-3 navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="interactiveNavBar3"
data-toggle="collapse"
data-target="#interactiveNavBar3">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="interactiveNavBar3" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Interactive Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "760px"
}
}'>
<a id="interactiveMegaMenu3" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">2 columns Demo block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="interactiveMegaMenu3">
<div class="row no-gutters">
<div class="col-md-6">
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-19.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-5.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description.</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- Promo -->
<div class="col-md-6 navbar-promo">
<a class="d-block navbar-promo-inner" href="#">
<img class="img-fluid rounded mb-3" src="../assets/img/380x227/img1.jpg" alt="Image Description">
<span class="font-size-1">Front makes you look at things from a different perspectives.</span>
</a>
</div>
<!-- End Promo -->
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-interactive-4 navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="interactiveNavBar4"
data-toggle="collapse"
data-target="#interactiveNavBar4">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="interactiveNavBar4" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Interactive Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="interactiveMegaMenu4" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">3 columns Demo block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="interactiveMegaMenu4">
<div class="row no-gutters">
<div class="col-lg-8">
<div class="navbar-promo-card-deck">
<!-- Promo Item -->
<div class="navbar-promo-card navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-45.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-card navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-13.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<div class="navbar-promo-card-deck">
<!-- Promo Item -->
<div class="navbar-promo-card navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-19.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-card navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-4.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<div class="navbar-promo-card-deck">
<!-- Promo Item -->
<div class="navbar-promo-card navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-5.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-card navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-23.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Title</span>
<small class="navbar-promo-text">Content description</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
</div>
<!-- Promo -->
<div class="col-md-4 navbar-promo d-none d-lg-block">
<a class="d-block navbar-promo-inner" href="#">
<img class="img-fluid rounded mb-3" src="../assets/img/380x227/img1.jpg" alt="Image Description">
<span class="font-size-1">Front makes you look at things from a different perspectives.</span>
</a>
</div>
<!-- End Promo -->
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-interactive-5 navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="interactiveNavBar5"
data-toggle="collapse"
data-target="#interactiveNavBar5">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="interactiveNavBar5" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Interactive Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "260px"
}
}'>
<a id="interactiveMegaMenu5" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs block</a>
<!-- Interactive Nav Item - Mega Menu -->
<div class="hs-mega-menu dropdown-menu" aria-labelledby="interactiveMegaMenu5" style="min-width: 330px;">
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-2.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">
Documentation
<span class="badge badge-primary badge-pill ml-1">v2.0</span>
</span>
<small class="navbar-promo-text">Development guides</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="#">
<div class="media align-items-center">
<img class="navbar-promo-icon" src="../assets/svg/icons/icon-1.svg" alt="SVG">
<div class="media-body">
<span class="navbar-promo-title">Snippets</span>
<small class="navbar-promo-text">Ready to use snippets</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<div class="navbar-promo-footer">
<!-- List -->
<div class="row no-gutters">
<div class="col-6">
<div class="navbar-promo-footer-item">
<small class="text-muted d-block">Check what's new</small>
<a class="small" href="#">
Changelog
</a>
</div>
</div>
<div class="col-6 navbar-promo-footer-ver-divider">
<div class="navbar-promo-footer-item">
<small class="text-muted d-block">Have a question?</small>
<a class="small" href="#">
Contact us
</a>
</div>
</div>
</div>
<!-- End List -->
</div>
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Alignment
Set "desktop": { "position": "left" } to "left" or "right" to align the mega menu position according to that side.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-alignment navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="alignmentNavBar"
data-toggle="collapse"
data-target="#alignmentNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="alignmentNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "left",
"maxWidth": "85%"
}
}'>
<a id="leftAlignmentMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Left alignment</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="leftAlignmentMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "85%"
}
}'>
<a id="rightAlignmentMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Right alignment</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="rightAlignmentMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
There are certain moments like, when mega menu size is small and located far from left or right corners where setting data-position="" to "left" or "right" is not an optimal solution. In this case, use .mega-menu-position-right-fix class for proper alignment.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-proper-alignment navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="properAlignmentNavBar"
data-toggle="collapse"
data-target="#properAlignmentNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="properAlignmentNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "400px"
}
}'>
<a id="properAlignmentMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Proper alignment</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu mega-menu-position-right-fix" aria-labelledby="properAlignmentMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm-3 mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm-3">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "left",
"maxWidth": "85%"
}
}'>
<a id="fixLeftAlignmentMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Left alignment</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="fixLeftAlignmentMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "85%"
}
}'>
<a id="fixRightAlignmentMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Right alignment</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="fixRightAlignmentMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Event
Choose opening events from hover to click through JavaScript init and "eventType": "click", attribute.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-click-event navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="clickEventNavBar"
data-toggle="collapse"
data-target="#clickEventNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="clickEventNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"eventType": "click",
"desktop": {
"position": "right",
"maxWidth": "85%"
}
}'>
<a id="clickEventMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Click Event</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="clickEventMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Or set them to hover.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-hover-event navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="hoverEventNavBar"
data-toggle="collapse"
data-target="#hoverEventNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="hoverEventNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "85%"
}
}'>
<a id="hoverEventMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Hover Event</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="hoverEventMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Responsive
Set your collapsing breakpoint to your needs through JavaScript init. This example collapses the mega menu at 992 breakpoint. Learn more here.
<header class="header">
<!-- Nav -->
<nav class="js-mega-menu-responsive navbar navbar-expand-lg">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="responsiveNavBar"
data-toggle="collapse"
data-target="#responsiveNavBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Navigation -->
<div id="responsiveNavBar" class="collapse navbar-collapse">
<ul class="navbar-nav">
<!-- Nav Item -->
<li class="hs-has-mega-menu navbar-nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"position": "right",
"maxWidth": "85%"
}
}'>
<a id="responsiveMegaMenu" class="hs-mega-menu-invoker nav-link nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Responsive</a>
<!-- Nav Item - Mega Menu -->
<div class="hs-mega-menu w-100 dropdown-menu" aria-labelledby="responsiveMegaMenu">
<div class="row mega-menu-body">
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">One</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Two</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
<a class="dropdown-item px-0" href="#">Three</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Three</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
<div class="col-sm mb-3 mb-sm-0">
<span class="d-block h5">Four</span>
<div class="mb-3">
<a class="dropdown-item px-0" href="#">One</a>
<a class="dropdown-item px-0" href="#">Two</a>
</div>
</div>
</div>
</div>
<!-- End Nav Item - Mega Menu -->
</li>
<!-- End Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// INITIALIZATION OF MEGA MENU
// =======================================================
var megaMenu = new HSMegaMenu($('.js-mega-menu)).init();
});
</script>
Config
data-hs-counter-options='{
...
eventType: 'hover'
direction: 'horizontal'
breakpoint: 'lg'
itemOptions: {
desktop: {
animation: 'animated'
animationIn: 'slideInUp'
animationOut: false
position: null
maxWidth: null
}
}
rtl: false
sideBarRatio: 1/4
pageContainer: $('body')
mobileSpeed: 400
classMap: {
initialized: '.hs-menu-initialized'
mobileState: '.hs-mobile-state'
subMenu: '.hs-sub-menu'
hasSubMenu: '.hs-has-sub-menu'
hasSubMenuActive: '.hs-sub-menu-opened'
megaMenu: '.hs-mega-menu'
hasMegaMenu: '.hs-has-mega-menu'
hasMegaMenuActive: '.hs-mega-menu-opened'
}
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-mega-menu-item-options='{}'
| Attribute | Description | Default value |
|---|---|---|
|
|
Defines the event on which the menu will be displayed. Valid values are:
|
hover |
|
|
Direction of the menus. Valid values are:
|
horizontal |
|
|
Determines with what resolution mobile layout is enabled. Resolution Map corresponds to Bootstrap 4 | 'lg' |
|
|
Appearing effect | 'slideInUp' |
|
|
Disappearing effect | false |
|
|
Menu location during initialization | null |
|
|
Sets the maximum width for the dropdown menu | null |
|
|
If true, displays all items from right-to-left (RTL) |
false |
|
|
Delay of the disappearance of the menu | 300 |
|
|
Determines how much of the width the sidebar will occupy the dropdown list. Only works if direction: 'vertical' |
1 / 4 |
|
|
Determines with respect to which element the drop-down menu will be positioned. Only works if direction: 'vertical' |
$('body') |
|
|
Opening speed of the menu in the mobile layout | 400 |
|
|
Class informing that the menu is ready to work | '.hs-menu-initialized' |
|
|
Class informing that the menu has moved to mobile layout | '.hs-mobile-state' |
|
|
Class for the sub menu. The script will look for exactly this class when working | '.hs-sub-menu' |
|
|
Class for items that contain a sub menu. The script will look for exactly this class when working | '.hs-has-sub-menu' |
|
|
Class given to an invoker when opening a sub menu | '.hs-sub-menu-opened' |
|
|
Class for mega menu. The script will look for exactly this class when working | '.hs-mega-menu' |
|
|
Class for items that contain mega menus. The script will look for exactly this class when working | '.hs-has-mega-menu' |
|
|
Class given to an invoker when opening a mega menu | '.hs-mega-menu-opened' |