Agent Wranglers

Interface Recommended

Build menus with popover

Build menus, tooltips and simple overlays with the built-in popover attribute, instead of JavaScript modal code.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Mark the menu with popover and point a button at it. The browser handles closing on outside click, Escape, focus and stacking. Style the backdrop with ::backdrop, and show the menu inline where popover is unsupported.

Example

<button popovertarget="menu">Menu</button>
<nav popover id="menu">
  <a href="/">Home</a>
  <a href="/pricing">Pricing</a>
</nav>

How to check

Open it with the keyboard and press Escape. Focus returns to the button.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/popover-api.