Dropdown Menu Anchored to a Trigger Button

The Setup

Dropdowns are the canonical anchor-positioning use case: a trigger button on top, a menu panel that should open right below the button's left edge.

.menu-trigger {
  anchor-name: --menu-1;
}

.menu-panel {
  position: absolute;
  position-anchor: --menu-1;
  position-area: bottom-start;
  margin-top: 4px;
  min-width: anchor-size(width); /* match trigger width */

  /* Recover gracefully near viewport edges */
  position-try-fallbacks:
    flip-block,            /* try opening upward instead */
    flip-inline,           /* try opening to the right */
    flip-block flip-inline; /* try opening upward AND to the right */
}

anchor-size(width)

The anchor-size() function returns a dimension of the anchor element. Setting min-width: anchor-size(width) makes the dropdown panel at least as wide as its trigger — the standard behavior for select-style dropdowns. You can also use anchor-size(height) if you need to size something to match the anchor's vertical dimension.

position-area: bottom-start semantics

bottom says "below the anchor". start says "aligned to the inline-start edge" — left in LTR, right in RTL. So bottom-start puts the menu's top-left corner at the anchor's bottom-left corner. Compare with:

• bottom-end — top-right corner at anchor's bottom-right (right-aligned dropdown)
• bottom — horizontally centered below the anchor (uncommon for menus)

Fallback ordering matters

The browser tries fallbacks in order until one fits without overflow. The order above (flip-block, then flip-inline, then both) prefers flipping vertically first (a menu that can't fit below should open above, not to the side). Reverse the order for sidebar menus where horizontal flipping is more natural.

The 4px gap

margin-top: 4px adds a small visual gap between the trigger and the menu. Don't use 0 — without a gap, hover states feel sticky.