Usage
Menu popup buttons come in several forms: from a simple dropdown of links to more expansive mega-nav menus.
Don’t overcomplicate this
- Do not add
role="menu"
orrole="option"
to the markup.- These roles imply additional keyboard functionality will be present
- Unless you’re building actual Web based software like Gmail, this is unnecessary
- Current support
- This simple example uses the popover API which has the most support in Chrome (Safari and Firefox my not yet support this).
- This will require additional JS and CSS to be production ready code.
<nav class="popover">
<ul>
<li>
<button class="popover-toggle menu" popovertarget="account-popover">
Menu
</button>
<ul id="account-popover" class="popover-surface" popover>
<li>
<a href="/design/">Design</a>
</li>
<li>
<a href="/web/">Web</a>
</li>
<li>
<a href="/ios/">iOS</a>
</li>
<li>
<a href="/android/">Android</a>
</li>
</ul>
</li>
</ul>
</nav>