---
title: "Build menus with popover · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/popover-api
updated: 2026-10-20
licence: "All rights reserved"
---

# Build menus with popover

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Build menus, tooltips and simple overlays with the built-in `popover` attribute, instead of JavaScript modal code.
- How: Mark the menu with `popover` and point a button at it with `popovertarget`. The browser handles closing on outside click and Escape, focus return and the top layer. Popover works in every major browser since 2024. Style the backdrop with `::backdrop`.
- Check: A browser test focuses the button and presses Enter. The menu matches `:popover-open`. After Escape it no longer matches, and focus is back on the button.

Example:

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

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

- Next: [Build modal dialogs with dialog](https://agentwranglers.se/playbook/website/interface/dialog-element)
- [Interface](https://agentwranglers.se/playbook/website/interface)