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>