Dropdown and Popover Patterns
Create accessible dropdown menus and popovers using CSS positioning and the Popover API.
The Popover API
The HTML Popover API (Chrome 114+, widely supported) provides declarative show/hide behavior: popover attribute on the target, popovertarget on the trigger button. No JavaScript needed for basic open/close, including light dismiss (click outside to close) and Escape key handling.
Styling Popovers
Target popover elements with [popover] or :popover-open. The ::backdrop pseudo-element is available for background dimming. Popovers render in the top layer like dialogs — no z-index stacking issues.
All lessons in this course
- Card Component with CSS Custom Properties
- Modal and Dialog Styling
- Dropdown and Popover Patterns
- Tab Component with :checked Hack vs JS