Dropdown menus without JavaScript toggles
The old way used JS for toggle, click-outside, and ESC, plus manual aria. The popover attribute and popovertarget give you a built-in dismissible popover with no toggle code.
2
3#menu[popover] {
4 position: absolute;
5 margin: 0.25rem 0;
6}
7
8/* Toggle, light dismiss, ESC: built in. */
2 display: none;
3}
4.menu.open { display: block; }
5
6/* JS: toggle class, document click-outside,
7 keydown ESC, aria-expanded, aria-hidden */
Popover Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers. Polyfill available →
Your first month is free
Managed WordPress hosting for faster sites.
Built-in toggle
Click the button to open, click outside or press ESC to close. No event listeners.
Top layer
Popover goes in the top layer. No z-index fights with the rest of the page.
Accessible
The platform handles focus and dismiss. You style the popover and wire the button with popovertarget.
How it works
The old way: a click handler toggles a class that shows or hides the menu. You add a document click listener for click-outside, a keydown listener for Escape, and you manage aria-expanded and aria-hidden yourself. It's easy to miss an edge case.
The modern way: put popover on the menu element and popovertarget="menu" on the button. The button becomes a popover trigger. Opening, closing, click-outside, and ESC are built in. The menu is rendered in the top layer. You only need CSS to position and style it.
role="menu" to the popover and role="menuitem" to each option. Arrow key navigation between menu items still requires JavaScript.