Dropdowns are built with
<details class="dropdown"> as a wrapper and
<ul> as direct childrens. Unless they are in a Nav, dropdowns are
width: 100%; by default.
Dropdowns are not available in the class‑less version.
For style consistency with the form elements, dropdowns are styled like a select by default.
Dropdowns with checkboxes and radios#
Dropdowns can be used as custom selects with
<input type="radio"> or
Select a phase of matter...
Select phases of matter...
<summary role="button"> transforms the dropdown into a button.
Dropdown as a button
Like regular buttons, they come with
.outline (not available in the class-less version).
Just like any form elements, validation states are provided with
Valid phase of matter: Solid
Debated classification: Plasma
You can use dropdowns inside Nav.
To change the alignment of the submenu, simply use