Header Mega Menu
Documentation and examples for Blueberry'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
$(
".js-mega-menu,
.js-mega-menu-basic,
.js-mega-menu-columns,
.js-mega-menu-interactive-1,
.js-mega-menu-interactive-2,
.js-mega-menu-interactive-3,
.js-mega-menu-interactive-4,
.js-mega-menu-interactive-5,
.js-mega-menu-animation,
.js-mega-menu-alignment,
.js-mega-menu-proper-alignment,
.js-mega-menu-click-event,
.js-mega-menu-hover-event,
.js-mega-menu-responsive"
).HSMegaMenu({});
});
</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-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="722px"
data-position="right">
<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 Blueberry 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">Blueberry 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">Blueberry 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-event="hover"
data-animation-in="slideInUp"
data-animation-out="fadeOut"
data-max-width="722px"
data-position="right">
<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>
<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">Examples</span>
<small class="navbar-promo-text">Ready to use snippets</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- End Interactive Nav Item - Mega Menu -->
</li>
<!-- End Interactive Nav Item -->
</ul>
</div>
<!-- End Navigation -->
</nav>
<!-- End Nav -->
</header>
Event
<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
$(".js-mega-menu").HSMegaMenu({});
});
</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'
|