Dropdown
Dropdowns are implemented using the <details> and <summary> elements, in combination with ARIA: menu pattern, which consists of a trigger element with aria-haspopup="menu" pointing to another element with role="menu", in combination with <details> and <summary> for the disclosure behavior.
Unless they are in a <nav>, dropdowns are width: 100%; by default.
Basic Usage
For style consistency with the form elements, dropdowns are styled like a select by default.
<details>
<summary aria-haspopup="menu">Dropdown</summary>
<ul role="menu">
<li><a role="menuitem" href="#">Solid</a></li>
<li><a role="menuitem" href="#">Liquid</a></li>
<li><a role="menuitem" href="#">Gas</a></li>
<li><a role="menuitem" href="#">Plasma</a></li>
</ul>
</details>With Checkboxes
Dropdowns can be used as custom selects with <input type="checkbox">.
<details>
<summary aria-haspopup="menu">Select phases of matter...</summary>
<ul role="menu">
<li>
<label>
<input type="checkbox" name="solid" />
Solid
</label>
</li>
<li>
<label>
<input type="checkbox" name="liquid" />
Liquid
</label>
</li>
</ul>
</details>With Radios
Dropdowns can be used as custom selects with <input type="radio">.
<details>
<summary aria-haspopup="menu">Select a phase of matter...</summary>
<ul role="menu">
<li>
<label>
<input type="radio" name="phase" value="solid" />
Solid
</label>
</li>
<li>
<label>
<input type="radio" name="phase" value="liquid" />
Liquid
</label>
</li>
</ul>
</details>
Different alignment (showcased with <nav>)
Use <ul dir="rtl"> to change the alignment of the dropdown menu.
When using dropdowns inside a <nav>, they are automatically styled to fit the navigation layout.
<nav>
<ul>
<li><strong>Acme Corp</strong></li>
</ul>
<ul>
<li><a href="#">Services</a></li>
<li>
<details>
<summary aria-haspopup="menu">Account</summary>
<ul role="menu" dir="rtl">
<li><a role="menuitem" href="#">My Profile</a></li>
<li><a role="menuitem" href="#">My Settings</a></li>
<li><a role="menuitem" href="#">Logout</a></li>
</ul>
</details>
</li>
<li><button>Log Out</button></li>
</ul>
</nav>
Validation States
Just like any form elements, validation states are provided with aria-invalid.
<details>
<summary aria-haspopup="menu" aria-invalid="false">Valid phase of matter: Solid</summary>
<ul role="menu">
<li><a role="menuitem" href="#">Solid</a></li>
<li><a role="menuitem" href="#">Liquid</a></li>
<li><a role="menuitem" href="#">Gas</a></li>
<li><a role="menuitem" href="#">Plasma</a></li>
</ul>
</details>
<hr>
<details>
<summary aria-haspopup="menu" aria-invalid="true">Debated classification: Plasma</summary>
<ul role="menu">
<li><a role="menuitem" href="#">Solid</a></li>
<li><a role="menuitem" href="#">Liquid</a></li>
<li><a role="menuitem" href="#">Gas</a></li>
<li><a role="menuitem" href="#">Plasma</a></li>
</ul>
</details>
As a Button
<summary role="button"> transforms the dropdown into a button.
<details>
<summary role="button" aria-haspopup="menu">
Dropdown as a button
</summary>
<ul role="menu">
<li><a role="menuitem" href="#">Solid</a></li>
<li><a role="menuitem" href="#">Liquid</a></li>
<li><a role="menuitem" href="#">Gas</a></li>
<li><a role="menuitem" href="#">Plasma</a></li>
</ul>
</details>Variants
Intent Variants
To convey intent and importance, dropdowns can be styled with different variants:
Modifiers
.ghost creates transparent background dropdowns with colored text and borders, useful for secondary actions where you want minimal visual weight.
.subtle creates dropdowns with a more muted appearance, often used for less prominent actions.