Skip to content

Dropdown

Dropdowns are implemented using the ARIA: menu pattern, which consists of a trigger element with aria-haspopup="menu" pointing to another element with role="menu".

Basic Dropdown

live preview
editable html
<details>
  <summary aria-haspopup="menu">Choose an option</summary>
  <ul role="menu">
    <li><a role="menuitem" href="#">Profile</a></li>
    <li><a role="menuitem" href="#">Settings</a></li>
    <li><a role="menuitem" href="#">Logout</a></li>
  </ul>
</details>

Reference

For more dropdown variants including multi-select, validation states, and navigation integration, see Dropdown examples at <details>.