---
title: "Pin menus to their button with CSS · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/anchor-positioning
updated: 2026-10-20
licence: "All rights reserved"
---

# Pin menus to their button with CSS

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

- Level: Recommended
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Attach popovers and menus to the element they belong to with CSS anchor positioning. Keep a plain fallback where browsers lack it.
- How: Give the trigger `anchor-name: --x` and the popup `position-anchor: --x`. Wrap it in `@supports (anchor-name: --x)`, with a plain fixed or absolute position as the fallback.
- Check: The popup stays attached when the page scrolls or the trigger moves.

Example:

```css
#menu { position: fixed; top: 4rem; right: 1rem; }
@supports (anchor-name: --menu) {
  .menu-button { anchor-name: --menu; }
  #menu {
    position-anchor: --menu;
    top: anchor(bottom);
    right: anchor(right);
  }
}
```

**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/anchor-positioning`.

- Previous: [Build modal dialogs with dialog](https://agentwranglers.se/playbook/website/interface/dialog-element)
- Next: [Wire buttons without click handlers](https://agentwranglers.se/playbook/website/interface/invoker-commands)
- [Interface](https://agentwranglers.se/playbook/website/interface)