Dropdown

Native link disclosure with animated open/close, retained open-state focus, and Escape dismissal.

Basic structure

details.dropdown > summary.button + div.dropdown-content

Menu alignment matches the popover’s left or right edge to the trigger. It does not move the trigger. Open the menu, then switch alignment to compare.

Try it Menu alignment

HTML

<div class="buttons is-centered"><details class="dropdown"><summary class="button">Sections</summary><div class="dropdown-content"><a href="#options">Component options</a><a href="#example-code">Copyable HTML</a></div></details></div>

Options

Class or attribute	What it does
`is-right`	Align the popover to the trigger’s right edge.
`open`	Native initial open state.
`optional js`	Motion, outside-click dismissal and focus return.