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-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>
              
            

Examples

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>
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/front/headers/

JavaScript behavior

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

eventType

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 with what resolution mobile layout is enabled. Resolution Map corresponds to Bootstrap 4 'lg'

itemOptions.desktop.animationIn

Appearing effect 'slideInUp'

itemOptions.desktop.animationOut

Disappearing effect false

itemOptions.desktop.position

Menu location during initialization null

itemOptions.desktop.maxWidth

Sets the maximum width for the dropdown menu null

rtl

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

hideTimeOut

Delay of the disappearance of the menu 300

sideBarRatio

Determines how much of the width the sidebar will occupy the dropdown list. Only works if direction: 'vertical' 1 / 4

pageContainer

Determines with respect to which element the drop-down menu will be positioned. Only works if direction: 'vertical' $('body')

mobileSpeed

Opening speed of the menu in the mobile layout 400

classMap.initialized

Class informing that the menu is ready to work '.hs-menu-initialized'

classMap.mobileState

Class informing that the menu has moved to mobile layout '.hs-mobile-state'

classMap.subMenu

Class for the sub menu. The script will look for exactly this class when working '.hs-sub-menu'

classMap.hasSubMenu

Class for items that contain a sub menu. The script will look for exactly this class when working '.hs-has-sub-menu'

classMap.hasSubMenuActive

Class given to an invoker when opening a sub menu '.hs-sub-menu-opened'

classMap.megaMenu

Class for mega menu. The script will look for exactly this class when working '.hs-mega-menu'

classMap.hasMegaMenu

Class for items that contain mega menus. The script will look for exactly this class when working '.hs-has-mega-menu'

classMap.hasMegaMenuActive

Class given to an invoker when opening a mega menu '.hs-mega-menu-opened'