Mega menu

A nav.mega-menu is site navigation whose top items open wide panels of grouped links.

Make the top items links and <button>s. Point each button at a .mega-menu-panel with popovertarget. The panel is then a native popover, and the browser does the work without JavaScript. It opens the panel, closes it on Escape or an outside click, and puts it next in the Tab order. It also tells assistive technology whether the panel is expanded.

The panel opens below the bar and spans the window. It lays its <section> groups out in as many columns as fit. For application commands, use a menubar instead.

<nav class="mega-menu" aria-label="Main">
  <a href="/" aria-current="page">Home</a>
  <button type="button" popovertarget="products">Products</button>
  <div id="products" class="mega-menu-panel" popover>
    <section>
      <h2>Build</h2>
      <ul>
        <li><a href="/editor">Editor<small>Write and preview</small></a></li>
        <li><a href="/api">API</a></li>
      </ul>
    </section>
    <section>
      <h2>Ship</h2>
      <ul>
        <li><a href="/deploy">Deploy</a></li>
      </ul>
    </section>
  </div>
  <a href="/pricing">Pricing</a>
</nav>

Tokens