demo · v131

Menu Anchor Scope

A navigation bar with three top-level items, each with its own popover submenu. All three buttons share the same CSS anchor name (--item-anchor). Without anchor-scope, the last button's anchor wins for every submenu. With anchor-scope, each <li> scopes the name so submenus anchor to the correct trigger — even when the anchor name is reused across all items.

browser support anchor-scope requires Chrome 131+. The demo includes a @supports not (anchor-scope) fallback that positions submenus with position: absolute so the navigation still works. The scope behavior is only visible in Chrome 131+.
checking anchor-scope support…

why anchor-scope matters here

All three .nav-trigger buttons have anchor-name: --item-anchor. Without scoping, the browser accumulates three elements with the same name and the last one wins — so every submenu would anchor to the third button. anchor-scope: --item-anchor on each .nav-item tells the browser: "this anchor name is only meaningful within this subtree." Each submenu now resolves to its own trigger.

the code

.nav-item {
  /* Contain --item-anchor lookups within each list item */
  anchor-scope: --item-anchor;
}

.nav-trigger {
  anchor-name: --item-anchor; /* same name in every item */
}

.submenu {
  position-anchor: --item-anchor; /* resolves to THIS item's trigger */
  inset-area: block-end span-inline-end; /* older fallback */
  position-area: block-end span-inline-end;
}

see also