Dropdown Menu

Top-layer rendering, Esc + click-outside dismiss, anchored under the trigger, auto-flips at viewport edges. All attributes and CSS.

popoveranchor positioningexit animations

PreviewCode

<button
  type="button"
  popovertarget="dd-options"
  class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--dd-options]"
>
  Options
  <svg class="size-3.5 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="m6 9 6 6 6-6"></path>
  </svg>
</button>

<div
  id="dd-options"
  popover
  class="m-auto min-w-44 scale-95 rounded-lg border border-border bg-popover p-1 text-popover-foreground opacity-0 shadow-lg transition-[opacity,scale,overlay,display] transition-discrete duration-150 open:scale-100 open:opacity-100 starting:open:scale-95 starting:open:opacity-0 [position-anchor:--dd-options] [position-area:block-end_span-inline-end] [position-try-fallbacks:flip-block] supports-[anchor-name:--a]:m-0 supports-[anchor-name:--a]:mt-1.5 supports-[anchor-name:--a]:origin-top-left"
>
  <button type="button" class="flex w-full cursor-pointer items-center rounded-md px-2.5 py-1.5 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none">Edit</button>
  <button type="button" class="flex w-full cursor-pointer items-center rounded-md px-2.5 py-1.5 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none">Duplicate</button>
  <button type="button" class="flex w-full cursor-pointer items-center rounded-md px-2.5 py-1.5 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none">Share…</button>
  <hr class="-mx-1 my-1 border-border" />
  <button type="button" class="flex w-full cursor-pointer items-center rounded-md px-2.5 py-1.5 text-left text-sm text-destructive hover:bg-accent focus-visible:bg-accent focus-visible:outline-none">Delete</button>
</div>

How it works

The popover attribute + popovertarget on the button gives top-layer rendering, toggling, Esc and click-outside dismiss.
CSS anchor positioning pins the panel under the trigger: [anchor-name:--dd-options] on the button, then [position-anchor:--dd-options] + [position-area:block-end_span-inline-end] on the panel (“below the anchor, growing to the right”).
[position-try-fallbacks:flip-block] flips the panel above the trigger near the bottom of the viewport.
position-area is unknown to browsers without anchor support, so they ignore it and the menu opens centered instead (the top-layer default). That’s why the base classes keep m-auto. Only the margin reset (m-0 plus the mt-1.5 gap) and the transform origin need explicit supports-[anchor-name:--a]: guards.
One trap this dodges: resetting placement with the inset shorthand under a variant can land later in the stylesheet than your top/left longhands and silently wipe them. position-area doesn’t touch insets at all.

Accessibility

Focus moves into the menu with Tab; Esc returns to the trigger. This is a popover, not an ARIA menu. There’s no roving arrow-key navigation. For most “actions under a button” cases that’s fine; if you need full menu semantics, that genuinely still needs JavaScript.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Popover APIBaseline 2025 · newly available	114	114	125	17	Content renders in normal document flow, always visible, and the trigger does nothing.
CSS anchor positioningLimited availability	129	129	147	26	The popover opens centered in the viewport (the top-layer default) instead of attached to its trigger.
Entry/exit animations (allow-discrete + @starting-style)Baseline 2024 · newly available	117	117	129	17.5	Elements appear and disappear instantly. Nothing breaks — you just lose the animation.

† @supports cannot test at-rules, so the badge checks transition-behavior: allow-discrete, which co-shipped with @starting-style in every engine.