Components
Dropdown
Dropdowns expose a temporary list of actions. Use select, radios, or checkboxes for form values; use dropdowns for commands the user can activate.
Default
Actions
<details>
<summary>Actions</summary>
<menu>
<li><a href="#">Rename</a></li>
<li><a href="#">Duplicate</a></li>
<li><a href="#">Archive</a></li>
</menu>
</details>Dropdown with icons
Actions
<details>
<summary>Actions</summary>
<menu>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"></path>
</svg>Rename</a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path>
<path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"></path>
</svg>Publish</a></li>
<li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
<path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"></path>
</svg>Save</a></li>
</menu>
</details>Dropdown label as button
Styled dropdown
Dropdown as button
<details>
<summary role="button" class="tertiary outline">Styled dropdown
</summary>
<menu>
<li><a href="#">Rename</a></li>
<li><a href="#">Duplicate</a></li>
</menu>
</details>
<details>
<summary role="button">Dropdown as button</summary>
<menu>
<li><label><input type="radio" name="dessert">Option 1</label></li>
<li><label><input type="radio" name="dessert">Option 2</label></li>
</menu>
</details>Dropdown items have hover effect
Actions
<details class="accent">
<summary>Actions</summary>
<menu>
<li><a href="#">Rename</a></li>
<li><a href="#">Duplicate</a></li>
<li><a href="#">Archive</a></li>
</menu>
</details>Dropdown with large list items
Large action menu
<details class="accent size-large">
<summary>Large action menu</summary>
<menu>
<li><a href="#">Rename</a></li>
<li><a href="#">Duplicate</a></li>
<li><a href="#">Archive</a></li>
</menu>
</details>