Dropdown
A non-modal action menu using the Popover API. Popover is part of Baseline 2025 across major browsers, while trigger-relative placement is progressively improved with newer anchor-positioning support.
Preview
Implementation Notes
The component relies on popover,
popovertarget, and popovertargetaction for
native open and close behavior. That keeps the menu HTML-only and avoids
custom event handling.
The menu width now tracks the trigger button when anchor sizing is available, so the fallback and enhanced layouts stay visually aligned. Browsers without anchor sizing still get a consistent minimum width.
Browser Compatibility
| Feature | Chrome | Edge | Firefox | Safari | Notes | Source |
|---|---|---|---|---|---|---|
popover
Baseline 2025
|
114+ | 114+ | 125+ | 17+ | Newly available across major browsers for the native non-modal popover surface and declarative toggle behavior. | caniuse |
popovertarget
Broad support
|
114+ | 114+ | 125+ | 17+ | Gives the button a declarative relationship with the dropdown panel. | caniuse |
| CSS anchor sizing and positioning Baseline 2026 | 125+ | 125+ | 147+ | 26+ | Needed for same-width menus and precise trigger-relative placement without a centered fallback. | caniuse |