Summary

The amp-mega-menu extension provides a menu component suitable for desktop/tablet use that appears as a top navigation bar (presumably inside the header element); it contains menu items that, when clicked, opens a dropdown container that holds additional menu content.

Design document

https://docs.google.com/document/d/1z2Bq8fia7vAUWn8Enpbj0beX-DqUC-mzTRnuX3rjLjk/edit?usp=sharing

Motivation

amp-mega-menu serves the needs of websites with large collections of navigational links. Developers can switch between this component and amp-sidebar via media query to enable responsive navigational menus. See Example of what this should look like.

Additional context

Proposed API

<amp-mega-menu layout="fixed-height" height="...">
  <nav> // list items directly under this nav will be rendered as mega menu items
    <ul>
      <li>
        <button>Heading 1</button>
        <div role="dialog">
          …  // content of submenu goes here
        </div>
      </li>
      <li>
        <button>Heading 2</button>
        <div role="dialog">
          …
        </div>
      </li>
      ...
    </ul>
  </nav>
</amp-mega-menu>