← Demo hub

Popover + anchor positioning

Try: Click “Open menu”. Popover should appear below the button. Click outside to dismiss (light dismiss).

If the menu doesn’t align to the button, your browser may lack full anchor positioning; Popover alone may still work.

Source

<button id="anchor-btn" popovertarget="menu">Open menu</button>
<div id="menu" popover>…</div>

#anchor-btn {
  anchor-name: --menu-trigger;
}
#menu {
  position: fixed;
  position-anchor: --menu-trigger;
  top: anchor(bottom);
  left: anchor(left);
  margin-top: 6px;
}
Support: Popover API is Baseline. anchor-name / position-anchor / anchor() are still uneven—verify in Chrome/Edge/Safari 26+; Firefox is catching up.