UI primitives

Popover

Newly availablesince Jan 2025

Replaces: A hand-rolled dropdown with focus handling, an escape-key listener and a z-index fight. The top layer, light dismiss and keyboard behaviour come with the attribute.

See it working

No JavaScript

Click outside or press Escape. The top layer, the dismissal and the focus handling came with the attribute.

The syntax

<button popovertarget="menu">Options</button>
<div id="menu" popover>…</div>
The demo’s full CSS 
.dm-pop { display: grid; place-items: center; min-height: 110px; }
.dm-pop-btn { font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px; border: 0; border-radius: 10px; background: #0a0a0f; color: #fff; cursor: pointer; }
.dm-pop-menu { max-width: 280px; padding: 16px; border: 1px solid #c9cdd8; border-radius: 12px; background: #fff; color: #1c1f2a; box-shadow: 0 24px 60px rgba(10,10,15,.22); }
.dm-pop-menu b { font-size: 15px; }
.dm-pop-menu p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; }
.dm-pop-menu::backdrop { background: rgba(10,10,15,.25); }

For browsers without it

A browser without it shows the popover element inline as ordinary content, so hide it with [popover]:not(:popover-open) only inside a support check, or the menu becomes unreachable instead of merely always visible.