Dropdowns
Dropdown menus and custom selects without JavaScript.
Dropdowns are built with
<details role="list"> as a
wrapper and <summary> and
<ul> as direct children.
For style consistency with the form elements, dropdowns are styled
like a <select> by default.
Dropdown
<summary role="button">
transforms the dropdown into a button.
Dropdown as a button 1
Dropdown as a button 2
Dropdown as a button 3
Dropdowns can be used as custom selects with
<input type="radio"> or
<input type="checkbox">
Select single element
Select multiple elements
Dropdowns can be used inside a
<nav> with a nested
<details role="list">
Example with a dropdown as a link:
Example with a default dropdown and a dropdown as a button:
You can also use
<li role="list"> as a nested
wrapper to render a list as a dropdown.
ℹ️ This syntax is experimental. In this version, the dropdown
menu is triggered on hover.