Header Mega Menu

Documentation and examples for Space's powerful, and responsive navigation mega menu.

How it works

Here's what you need to know before getting started with the mega menu:

  • Mega menu requires a wrapping .js-mega-menu (or any other ID or class which you can replace with) along with .navbar class.
  • .hs-has-mega-menu - is a parent class that contains sub-elements within it.
  • .hs-mega-menu - is a child class that contains a container for the mega menu.
  • Mega menus are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our hs-megamenu JavaScript plugin.

How to use?

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

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

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

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

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

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

Examples

Basic

              
                <!-- Nav -->
                <nav class="js-mega-menu-basic navbar navbar-expand-lg u-header__navbar">
                  <div id="navBarBasic" class="navbar-collapse u-header__navbar-collapse">
                    <ul class="navbar-nav u-header__navbar-nav">
                      <!-- Basic Mega Menu -->
                      <li class="nav-item hs-has-mega-menu u-header__nav-item"
                          data-event="hover"
                          data-animation-in="slideInUp"
                          data-animation-out="fadeOut"
                          data-position="left">
                        <a id="basicMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                           aria-haspopup="true"
                           aria-expanded="false">
                          Mega Menu
                          <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                        </a>

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- Basic Mega Menu -->
                    </ul>
                  </div>
                </nav>
                <!-- End Nav -->
              
            

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. Use utility classes or use one of the predefined .w-* classes and apply them next to .hs-mega-menu class.

              
                <!-- Nav -->
                <nav class="js-mega-menu-columns navbar navbar-expand-lg u-header__navbar">
                  <div id="navBarBasic" class="navbar-collapse u-header__navbar-collapse">
                    <ul class="navbar-nav u-header__navbar-nav">
                      <!-- Two Columns Mega Menu -->
                      <li class="nav-item hs-has-mega-menu u-header__nav-item"
                          data-event="hover"
                          data-animation-in="slideInUp"
                          data-animation-out="fadeOut"
                          data-position="left">
                        <a id="twoColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                           aria-haspopup="true"
                           aria-expanded="false">
                          2 Columns
                          <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                        </a>

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="twoColumnsMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- End Two Columns Mega Menu -->

                      <!-- Three Columns Mega Menu -->
                      <li class="nav-item hs-has-mega-menu u-header__nav-item"
                          data-event="hover"
                          data-animation-in="slideInUp"
                          data-animation-out="fadeOut"
                          data-position="left">
                        <a id="threeColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                           aria-haspopup="true"
                           aria-expanded="false">
                          3 Columns
                          <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                        </a>

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="threeColumnsMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- End Three Columns Mega Menu -->

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

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fourColumnsMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- End Four Columns Mega Menu -->

                      <!-- Five Columns Mega Menu -->
                      <li class="nav-item hs-has-mega-menu u-header__nav-item"
                          data-event="hover"
                          data-animation-in="slideInUp"
                          data-animation-out="fadeOut"
                          data-position="left">
                        <a id="fiveColumnsMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                           aria-haspopup="true"
                           aria-expanded="false">
                          5 Columns
                          <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                        </a>

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="fiveColumnsMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- End Five Columns Mega Menu -->
                    </ul>
                  </div>
                </nav>
                <!-- End Nav -->
              
            

Event

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

            
              event: 'click',
            
          
              
                <!-- Nav -->
                <nav class="js-mega-menu-event navbar navbar-expand-lg u-header__navbar">
                  <div id="navBarBasic" class="navbar-collapse u-header__navbar-collapse">
                    <ul class="navbar-nav u-header__navbar-nav">
                      <!-- Basic Mega Menu -->
                      <li class="nav-item hs-has-mega-menu u-header__nav-item"
                          data-event="click"
                          data-animation-in="slideInUp"
                          data-animation-out="fadeOut"
                          data-position="left">
                        <a id="basicMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                           aria-haspopup="true"
                           aria-expanded="false">
                          Mega Menu
                          <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                        </a>

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- End Basic Mega Menu -->
                    </ul>
                  </div>
                </nav>
                <!-- End Nav -->
              
            

Responsive

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

            
              $('.js-mega-menu-responsive').HSMegaMenu({
                event: 'hover',
                pageContainer: $('.container'),
                breakpoint: 576,
                hideTimeOut: 0
              });
            
          
              
                <!-- Nav -->
                <nav class="js-mega-menu-responsive navbar navbar-expand-sm u-header__navbar">
                  <div id="navBarResponsive" class="navbar-collapse u-header__navbar-collapse">
                    <ul class="navbar-nav u-header__navbar-nav">
                      <!-- Basic Mega Menu -->
                      <li class="nav-item hs-has-mega-menu u-header__nav-item"
                          data-event="hover"
                          data-animation-in="slideInUp"
                          data-animation-out="fadeOut"
                          data-position="left">
                        <a id="basicMegaMenu" class="nav-link u-header__nav-link" href="javascript:;"
                           aria-haspopup="true"
                           aria-expanded="false">
                          Mega Menu
                          <span class="fa fa-angle-down u-header__nav-link-icon"></span>
                        </a>

                        <!-- Mega Menu -->
                        <div class="hs-mega-menu w-100 u-header__sub-menu" aria-labelledby="basicMegaMenu">
                          <div class="u-header__mega-menu-wrapper-v1">
                            <ul class="row list-unstyled u-header__mega-menu-list">
                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-lg-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>

                              <li class="col-sm-6 col-lg u-header__mega-menu-col mb-3 mb-sm-0">
                                <span class="u-header__sub-menu-title">Title</span>

                                <!-- Links -->
                                <ul class="list-unstyled">
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                  <li><a class="nav-link u-header__sub-menu-nav-link px-0" href="#">Link</a></li>
                                </ul>
                                <!-- End Links -->
                              </li>
                            </ul>
                          </div>
                        </div>
                        <!-- End Mega Menu -->
                      </li>
                      <!-- End Basic Mega Menu -->
                    </ul>
                  </div>
                </nav>
                <!-- End Nav -->
              
            

JavaScript behavior

Config

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

Callbacks

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

Methods

List of available JavaScript functions.

Attribute Description Default value

event

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

direction

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

breakpoint

Determines below what permission the device layout is enabled.

animationIn

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

animationOut

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

rtl

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

hideTimeOut

Delay of the disappearance of the menu. 300

sideBarRatio

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

pageContainer

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

classMap

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

mobileSpeed

Opening speed of the menu in the mobile layout. 400

mobileEasing

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

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