Mega Menu

The mega menu. This uses a js file located in the root libraries folder. The menu is accessible for keyboard users. The mega menu has two renderings. Main menu and in page. They each have a class requirement.
Main menu .mega-menu__main
In page menu .mega-menu__in-page
Because of the requirement for the desktop to hover, it is best practice to test the collapsed menu on a device.
The inpage example is sticky, here we are demonstrating that with a large empty div to scroll through.

Markup Details
                            <nav id="nav" class="mega-menu__container mega-nav mega-menu__main">
  {%
    include "@components/mega-menu/mega-menu.twig" with {
      items
    }
  %}
</nav>

<div style="height:1000px; margin-top: 300px;">
  <section class="sticky-container">
    <div class="sticky-container__inner">
      <nav id="nav" class="mega-menu__container mega-nav mega-menu__in-page">
        {%
          include "@components/mega-menu/mega-menu.twig" with {
            items
          }
        %}
      </nav>
    </div>
  </section>
</div>