# Mega menu

> Site navigation whose top items open wide panels of grouped links, on native popovers.

## Anatomy

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](/menubar.html.md) instead.

[Home](#) Products

## Build

-   [EditorWrite and preview](#editor)
-   [API](#api)

## Ship

-   [Deploy](#deploy)

[Pricing](#pricing)

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

| Token | Default |
| --- | --- |
| `--md-comp-mega-menu-container-color` | `--md-sys-color-surface-container` |
| `--md-comp-mega-menu-shape` | 16px |
| `--md-comp-mega-menu-margin` | 16px (panel inset from the window) |
| `--md-comp-mega-menu-column-width` | 200px (minimum) |