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.