Interface Recommended

Pin menus to their button with CSS

Attach popovers and menus to the element they belong to with CSS anchor positioning. Keep a plain fallback where browsers lack it.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

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.

Example

#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);
  }
}

How to check

The popup stays attached when the page scrolls or the trigger moves.

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.