Dropdown

Give the list popover and .dropdown, and point the button's popovertarget at its id. Put the list right after the button, which then shows a chevron that turns while the menu is open. Clicking outside or pressing Esc closes it, and the browser tells screen readers whether it is open. aria-current marks the selected link.

Where the browser supports anchor positioning, the menu opens below the button, at least as wide as it, and flips above it near the bottom of the screen. It sits in the top layer, so no container clips it. Browsers without anchor positioning center it like any popover.

Button

The button keeps every button color, style and size.

Select

.select draws the button as a select, for a menu of choices. List items can hold labels with checkboxes or radios.

In a form

Inside a label the select button sits under the label text like any control. aria-invalid on it shows a validation state.

In a nav

Inside nav a button without a class looks like a link. See nav.

Sizes and styles

A select button takes size classes, .rounded, .square and .outlined.

Variables