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 .navbar class.
  • .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-megamenu JavaScript plugin.

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

                
                  <link rel="stylesheet" href="../../assets/vendor/hs-megamenu/src/hs.megamenu.css">
                
              

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                
                  <script src="../../assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
                
              

Copy-paste the following <script> near the end of your pages under JS Front to enable them.

                
                  <script src="../../assets/js/components/hs.header.js"></script>
                
              

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                
                  <script>
                    $(window).on('load', function () {
                      // initialization of HSMegaMenu component
                      $('.js-mega-menu').HSMegaMenu({
                        event: 'hover',
                        pageContainer: $('.container'),
                        breakpoint: 767.98,
                        hideTimeOut: 0
                      });
                    });

                    $(document).on('ready', function () {
                      // initialization of header
                      $.HSCore.components.HSHeader.init($('#header'));
                    });
                  </script>
                
              

Examples

Basic

                      
                        <ul class="navbar-nav u-header__navbar-nav">
                          <!-- Nav Item -->
                          <li class="nav-item hs-has-mega-menu u-header__nav-item"
                              data-event="hover"
                              data-animation-in="slideInUp"
                              data-animation-out="fadeOut"
                              data-position="left">
                            <a id="basicMegaMenu" class="nav-link u-header__nav-link u-header__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 u-header__sub-menu" aria-labelledby="basicMegaMenu">
                              <div class="row u-header__mega-menu-wrapper">
                                <div class="col-sm-3 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">One</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-3 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Two</span>
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-3 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Three</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-3">
                                  <span class="u-header__sub-menu-title">Four</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <!-- End Nav Item - Mega Menu -->
                          </li>
                          <!-- End Nav Item -->
                        </ul>
                      
                    

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-max-width="" attribute.

                      
                        <ul class="navbar-nav u-header__navbar-nav">
                          <!-- 2 Columns Item -->
                          <li class="nav-item hs-has-mega-menu u-header__nav-item"
                              data-event="hover"
                              data-animation-in="slideInUp"
                              data-animation-out="fadeOut"
                              data-max-width="400px"
                              data-position="left">
                            <a id="twoColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">2 Columns</a>

                            <!-- 2 Columns Item - Mega Menu -->
                            <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="twoColumnsMegaMenu">
                              <div class="row u-header__mega-menu-wrapper">
                                <div class="col-sm-6 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">One</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-6">
                                  <span class="u-header__sub-menu-title">Two</span>
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <!-- End 2 Columns Item - Mega Menu -->
                          </li>
                          <!-- End 2 Columns Item -->

                          <!-- 3 Columns Item -->
                          <li class="nav-item hs-has-mega-menu u-header__nav-item"
                              data-event="hover"
                              data-animation-in="slideInUp"
                              data-animation-out="fadeOut"
                              data-max-width="500px"
                              data-position="left">
                            <a id="threeColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">3 Columns</a>

                            <!-- 3 Columns Item - Mega Menu -->
                            <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="threeColumnsMegaMenu">
                              <div class="row u-header__mega-menu-wrapper">
                                <div class="col-sm-4 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">One</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-4 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Two</span>
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-4">
                                  <span class="u-header__sub-menu-title">Three</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <!-- End 3 Columns Item - Mega Menu -->
                          </li>
                          <!-- End 3 Columns Item -->

                          <!-- 4 Columns Item -->
                          <li class="nav-item hs-has-mega-menu u-header__nav-item"
                              data-event="hover"
                              data-animation-in="slideInUp"
                              data-animation-out="fadeOut"
                              data-position="left">
                            <a id="fourColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">4 Columns</a>

                            <!-- 4 Columns Item - Mega Menu -->
                            <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fourColumnsMegaMenu">
                              <div class="row u-header__mega-menu-wrapper">
                                <div class="col-sm-3 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">One</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-3 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Two</span>
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-3 mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Three</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-3">
                                  <span class="u-header__sub-menu-title">Four</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <!-- End 4 Columns Item - Mega Menu -->
                          </li>
                          <!-- End 4 Columns Item -->

                          <!-- 5 Items Item -->
                          <li class="nav-item hs-has-mega-menu u-header__nav-item"
                              data-event="hover"
                              data-animation-in="slideInUp"
                              data-animation-out="fadeOut"
                              data-position="left">
                            <a id="fiveColumnsMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">5 Columns</a>

                            <!-- 5 Items Item - Mega Menu -->
                            <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fiveColumnsMegaMenu">
                              <div class="row u-header__mega-menu-wrapper">
                                <div class="col-sm mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">One</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Two</span>
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Three</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm mb-3 mb-sm-0">
                                  <span class="u-header__sub-menu-title">Four</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm">
                                  <span class="u-header__sub-menu-title">Five</span>
                                  <ul class="u-header__sub-menu-nav-group mb-3">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>
                            <!-- End 5 Items Item - Mega Menu -->
                          </li>
                          <!-- End 5 Items Item -->
                        </ul>
                      
                    

Interactive styles

These are some custom styles with interactive contents.

                      
                        <!-- Interactive Nav Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="hover"
                            data-animation-in="slideInUp"
                            data-animation-out="fadeOut"
                            data-position="left">
                          <a id="interactiveMegaMenu1" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Promo block and Links</a>

                          <!-- Interactive Nav Item - Mega Menu -->
                          <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="interactiveMegaMenu1">
                            <div class="row no-gutters">
                              <div class="col-lg-6">
                                <!-- Banner Image -->
                                <div class="u-header__banner" style="background-image: url(../../assets/img/img27.jpg);">
                                  <div class="u-header__banner-content">
                                    <div class="mb-4">
                                      <span class="u-header__banner-title">Branding Works</span>
                                      <p class="u-header__banner-text">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 <span class="fas fa-angle-right ml-2"></span></a>
                                  </div>
                                </div>
                                <!-- End Banner Image -->
                              </div>

                              <div class="col-lg-6">
                                <div class="row u-header__mega-menu-wrapper">
                                  <div class="col-sm-3 mb-3 mb-sm-0">
                                    <span class="u-header__sub-menu-title">One</span>
                                    <ul class="u-header__sub-menu-nav-group mb-3">
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                    </ul>
                                  </div>

                                  <div class="col-sm-3 mb-3 mb-sm-0">
                                    <span class="u-header__sub-menu-title">Two</span>
                                    <ul class="u-header__sub-menu-nav-group">
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                    </ul>
                                  </div>

                                  <div class="col-sm-3 mb-3 mb-sm-0">
                                    <span class="u-header__sub-menu-title">Three</span>
                                    <ul class="u-header__sub-menu-nav-group mb-3">
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    </ul>
                                  </div>

                                  <div class="col-sm-3">
                                    <span class="u-header__sub-menu-title">Four</span>
                                    <ul class="u-header__sub-menu-nav-group mb-3">
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                      <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                    </ul>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Interactive Nav Item - Mega Menu -->
                        </li>
                        <!-- End Interactive Nav Item -->
                      
                    
                      
                        <!-- Interactive Nav Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="hover"
                            data-animation-in="slideInUp"
                            data-animation-out="fadeOut"
                            data-position="left">
                          <a id="interactiveMegaMenu2" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Product block</a>

                          <!-- Interactive Nav Item - Mega Menu -->
                          <div class="hs-mega-menu u-header__sub-menu" aria-labelledby="interactiveMegaMenu2">
                            <div class="u-header__mega-menu-wrapper">
                              <span class="u-header__sub-menu-title">Shop Elements</span>

                              <div class="row">
                                <div class="col-sm-6">
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">One</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Two</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Three</a></li>
                                  </ul>
                                </div>

                                <div class="col-sm-6">
                                  <ul class="u-header__sub-menu-nav-group">
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Four</a></li>
                                    <li><a class="nav-link u-header__sub-menu-nav-link" href="#">Five</a></li>
                                  </ul>
                                </div>
                              </div>
                            </div>

                            <!-- Mega Menu Banner -->
                            <div class="u-header__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="u-header__product-banner-content">
                                  <div class="mb-4">
                                    <span class="u-header__product-banner-title">Win T-shirt</span>
                                    <p class="u-header__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="../shop/classic.html">Learn More <span class="fas fa-angle-right ml-2"></span></a>
                                </div>
                              </div>
                            </div>
                            <!-- End Mega Menu Banner -->
                          </div>
                          <!-- End Interactive Nav Item - Mega Menu -->
                        </li>
                        <!-- End Interactive Nav Item -->
                      
                    
                      
                        <!-- Interactive Nav Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="hover"
                            data-animation-in="slideInUp"
                            data-animation-out="fadeOut"
                            data-position="left">
                          <a id="interactiveMegaMenu3" class="nav-link u-header__nav-link u-header__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 u-header__sub-menu" aria-labelledby="interactiveMegaMenu3">
                            <div class="row no-gutters">
                              <div class="col-md-6">
                                <!-- Promo Item -->
                                <div class="u-header__promo-item">
                                  <a class="u-header__promo-link" href="#">
                                    <div class="media align-items-center">
                                      <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="u-header__promo-title">Title</span>
                                        <small class="u-header__promo-text">Content description.</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->

                                <!-- Promo Item -->
                                <div class="u-header__promo-item">
                                  <a class="u-header__promo-link" href="#">
                                    <div class="media align-items-center">
                                      <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="u-header__promo-title">Title</span>
                                        <small class="u-header__promo-text">Content description.</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->

                                <!-- Promo Item -->
                                <div class="u-header__promo-item">
                                  <a class="u-header__promo-link" href="#">
                                    <div class="media align-items-center">
                                      <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
                                      <div class="media-body">
                                        <span class="u-header__promo-title">Title</span>
                                        <small class="u-header__promo-text">Content description.</small>
                                      </div>
                                    </div>
                                  </a>
                                </div>
                                <!-- End Promo Item -->
                              </div>

                              <!-- Promo -->
                              <div class="col-md-6 u-header__promo">
                                <a class="d-block u-header__promo-inner" href="#">
                                  <div class="position-relative">
                                    <img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
                                    <span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
                                  </div>
                                  <span class="text-secondary 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 -->
                      
                    
                      
                        <!-- Interactive Nav Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="hover"
                            data-animation-in="slideInUp"
                            data-animation-out="fadeOut"
                            data-position="left">
                          <a id="interactiveMegaMenu4" class="nav-link u-header__nav-link u-header__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 u-header__sub-menu" aria-labelledby="interactiveMegaMenu3">
                            <div class="row no-gutters">
                              <div class="col-lg-8">
                                <div class="u-header__promo-card-deck">
                                  <!-- Promo Item -->
                                  <div class="u-header__promo-card u-header__promo-item">
                                    <a class="u-header__promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-45.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="u-header__promo-title">Title</span>
                                          <small class="u-header__promo-text">Content description</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->

                                  <!-- Promo Item -->
                                  <div class="u-header__promo-card u-header__promo-item">
                                    <a class="u-header__promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-13.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="u-header__promo-title">Title</span>
                                          <small class="u-header__promo-text">Content description</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->
                                </div>

                                <div class="u-header__promo-card-deck">
                                  <!-- Promo Item -->
                                  <div class="u-header__promo-card u-header__promo-item">
                                    <a class="u-header__promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-19.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="u-header__promo-title">Title</span>
                                          <small class="u-header__promo-text">Content description</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->

                                  <!-- Promo Item -->
                                  <div class="u-header__promo-card u-header__promo-item">
                                    <a class="u-header__promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-4.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="u-header__promo-title">Title</span>
                                          <small class="u-header__promo-text">Content description</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->
                                </div>

                                <div class="u-header__promo-card-deck">
                                  <!-- Promo Item -->
                                  <div class="u-header__promo-card u-header__promo-item">
                                    <a class="u-header__promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-5.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="u-header__promo-title">Title</span>
                                          <small class="u-header__promo-text">Content description</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->

                                  <!-- Promo Item -->
                                  <div class="u-header__promo-card u-header__promo-item">
                                    <a class="u-header__promo-link" href="#">
                                      <div class="media align-items-center">
                                        <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-23.svg" alt="SVG">
                                        <div class="media-body">
                                          <span class="u-header__promo-title">Title</span>
                                          <small class="u-header__promo-text">Content description</small>
                                        </div>
                                      </div>
                                    </a>
                                  </div>
                                  <!-- End Promo Item -->
                                </div>
                              </div>

                              <!-- Promo -->
                              <div class="col-md-4 u-header__promo d-none d-lg-block">
                                <a class="d-block u-header__promo-inner" href="#">
                                  <div class="position-relative">
                                    <img class="img-fluid rounded mb-3" src="../../assets/img/380x227/img6.jpg" alt="Image Description">
                                    <span class="badge badge-success badge-pill badge-pos shadow-sm mt-3">New</span>
                                  </div>
                                  <span class="text-secondary 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 -->
                      
                    
                      
                        <!-- Interactive Nav Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="hover"
                            data-animation-in="slideInUp"
                            data-animation-out="fadeOut"
                            data-position="left">
                          <a id="interactiveMegaMenu5" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs block</a>

                          <!-- Interactive Nav Item - Mega Menu -->
                          <div class="hs-mega-menu u-header__sub-menu" aria-labelledby="interactiveMegaMenu5" style="min-width: 330px;">
                            <!-- Promo Item -->
                            <div class="u-header__promo-item">
                              <a class="u-header__promo-link" href="#">
                                <div class="media align-items-center">
                                  <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-2.svg" alt="SVG">
                                  <div class="media-body">
                                    <span class="u-header__promo-title">
                                      Documentation
                                      <span class="badge badge-primary badge-pill ml-1">v2.0</span>
                                    </span>
                                    <small class="u-header__promo-text">Development guides</small>
                                  </div>
                                </div>
                              </a>
                            </div>
                            <!-- End Promo Item -->

                            <!-- Promo Item -->
                            <div class="u-header__promo-item">
                              <a class="u-header__promo-link" href="#">
                                <div class="media align-items-center">
                                  <img class="js-svg-injector u-header__promo-icon" src="../../assets/svg/icons/icon-1.svg" alt="SVG">
                                  <div class="media-body">
                                    <span class="u-header__promo-title">Get started</span>
                                    <small class="u-header__promo-text">Components and snippets</small>
                                  </div>
                                </div>
                              </a>
                            </div>
                            <!-- End Promo Item -->

                            <div class="u-header__promo-footer">
                              <!-- List -->
                              <div class="row no-gutters">
                                <div class="col-6">
                                  <div class="u-header__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 u-header__promo-footer-ver-divider">
                                  <div class="u-header__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 -->
                      
                    

Animation

To open and close mega menus with animation, use data-animation-in="" and data-animation-out="" attributes

All available animation values, can be found here .

                      
                        <!-- SlideInUp Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-animation-in="slideInUp"
                            data-animation-out="fadeOut">
                          <a id="slideInUpMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">SlideIn</a>
                        </li>
                        <!-- End SlideInUp Item -->

                        <!-- FadeIn Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-animation-in="fadeIn"
                            data-animation-out="fadeOut">
                          <a id="fadeInUpMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">FadeIn</a>
                        </li>
                        <!-- End FadeIn Item -->

                        <!-- No Animation Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item">
                          <a id="noAnimationMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">No animation</a>
                        </li>
                        <!-- End No Animation Item -->
                      
                    

Alignment

Set data-position="" to "left" or "right" to align the mega menu position according to that side.

                      
                        <!-- Left Alignment Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-position="left">
                          <a id="leftAlignmentMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Left alignment</a>
                        </li>
                        <!-- End Left Alignment Item -->

                        <!-- Right Alignment Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-position="right">
                          <a id="rightAlignmentMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Right alignment</a>
                        </li>
                        <!-- End Right Alignment Item -->
                      
                    

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 .u-header__mega-menu-position-right-fix class for proper alignment.

                      
                        <!-- Proper Alignment Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-position="right">
                          <a id="properAlignmentMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Proper alignment</a>

                          <!-- Nav Item - Mega Menu -->
                          <div class="hs-mega-menu u-header__sub-menu u-header__mega-menu-position-right-fix" aria-labelledby="properAlignmentMegaMenu">
                          </div>
                          <!-- End Nav Item - Mega Menu -->
                        </li>
                        <!-- End Proper Alignment Item -->
                      
                    

Event

Choose opening events from hover to click through JavaScript init and data-event="event" attribute.

                      
                        <!-- Click Event Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="click">
                          <a id="clickEventMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Click Event</a>
                        </li>
                        <!-- End Click Event Item -->
                      
                    
                      
                        event: 'click',
                      
                    

Or set them to hover.

                      
                        <!-- Hover Event Item -->
                        <li class="nav-item hs-has-mega-menu u-header__nav-item"
                            data-event="hover">
                          <a id="hoverEventMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Hover Event</a>
                        </li>
                        <!-- End Hover Event Item -->
                      
                    
                      
                        event: 'hover',
                      
                    

Responsive

Set your collapsing breakpoint to your needs through JavaScript init. This example collapses the mega menu at 576 breakpoint. Learn more here.

                      
                        <!-- JS Plugins Init. -->
                        <script>
                          $('.js-mega-menu-responsive').HSMegaMenu({
                            event: 'hover',
                            pageContainer: $('.container'),
                            breakpoint: 575.98,
                            hideTimeOut: 0
                          });
                        </script>
                      
                    

JavaScript behavior

Config

                
                  event: 'hover' - string
                  direction: 'horizontal' - string
                  breakpoint: 991 - integer
                  animationIn: false - boolean
                  animationOut: false - boolean
                  rtl: false - boolean
                  hideTimeOut: 300 - integer
                  sideBarRatio: 1/4 - integer(float)
                  pageContainer: $('body') - selector
                  classMap: {
                    initialized: '.hs-menu-initialized', - string
                    mobileState: '.hs-mobile-state', - string
                    subMenu: '.hs-sub-menu', - string
                    hasSubMenu: '.hs-has-sub-menu', - string
                    hasSubMenuActive: '.hs-sub-menu-opened', - string
                    megaMenu: '.hs-mega-menu', - string
                    hasMegaMenu: '.hs-has-mega-menu', - string
                    hasMegaMenuActive: '.hs-mega-menu-opened' - string
                  } - object
                  mobileSpeed: 400 - integer
                  mobileEasing: 'linear' - string
                
              

Callbacks

                
                  beforeOpen: function(){} - function
                  beforeClose: function(){} - function
                  afterOpen: function(){} - function
                  afterClose: function(){} - function
                
              

Methods

List of available JavaScript functions.

Attribute Description Default value

event

Defines the event on which the menu will be displayed. Valid values are:
  • click
  • hover
hover

direction

Direction of the menus. Valid values are:
  • horizontal
  • vertical
horizontal

breakpoint

Determines below what permission the device layout is enabled.

animationIn

Revealing effect. To run the script, you must additionally link animate.css
All available animation values, can be found here .
no

animationOut

Disappearing effect. To run the script, you must additionally link animate.css
All available animation values, can be found here .
no

rtl

If true, displays all items from right-to-left (RTL). false

hideTimeOut

Delay of the disappearance of the menu. 300

sideBarRatio

Determines which part of the width of the sidebar will be occupied by a drop-down list. Works only if Works only if direction set to true.

pageContainer

Determines relative to what element the drop-down menu will be positioned. Works only if Works only if direction set to true.

classMap

Defines the class names for the elements of the mega menu. Works only if Works only if direction set to true.
  • initialized - A class-trigger informing that the menu is ready to work.
  • mobileState - A class-trigger that indicates that the menu has moved to the mobile layout.
  • subMenu - Defines the classes for the sub-menu.
  • hasSubMenu - Defines a trigger class for items that have a sub-menu.
  • hasSubMenuActive - Defines the active class when the sub-menu is opened.
  • megaMenu - Defines the classes for the mega-menu.
  • hasMegaMenu - Defines a trigger class for items that have a mega-menu.
  • hasMegaMenuActive - Defines the active class when opening the mega-menu.

mobileSpeed

Opening speed of the menu in the mobile layout. 400

mobileEasing

Determines the smoothness of the animation. Valid values are:
  • linear
  • swing
jquery.easing.min.js plugin is required to extend the plugin.

Additional values:
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce
linear
Contact Us