• Documentation
  • Examples
  • Docs
Expand Collapse Table of content
Getting started
  • Usage
  • Themes
  • Customization
  • Class-less version
  • RTL
Layout
  • Containers
  • Grid
  • Horizontal scroller
Elements
  • Typography
  • Buttons
  • Forms
  • Tables
Components
  • Accordions
  • Cards
  • Dropdowns
  • Modal
  • Navs
  • Progress
Utilities
  • Loading
  • Tooltips
Extend
  • We love .classes

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
  • Action
  • Another action
  • Something else here
<!-- Dropdown -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

<!-- Select -->
<select>
  <option value="" disabled selected>Select</option>
  <option>…</option>
</select>

<summary role="button"> transforms the dropdown into a button.

Dropdown as a button 1
  • Action
  • Another action
  • Something else here
Dropdown as a button 2
  • Action
  • Another action
  • Something else here
Dropdown as a button 3
  • Action
  • Another action
  • Something else here
<!-- Primary -->
<details role="list">
  <summary aria-haspopup="listbox" role="button">
    Dropdown as a button 1
  </summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

<!-- Secondary -->
<details role="list">
  <summary aria-haspopup="listbox" role="button" class="secondary">
    Dropdown as a button 2
  </summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

<!-- Contrast -->
<details role="list">
  <summary aria-haspopup="listbox" role="button" class="contrast">
    Dropdown as a button 3
  </summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

Dropdowns can be used as custom selects with <input type="radio"> or <input type="checkbox">

Select single element
Select multiple elements
<!-- With radio buttons -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li>
      <label for="small">
        <input type="radio" id="small" name="size" value="small">
        Small
      </label>
    </li>
    <li>
      <label for="medium">
        <input type="radio" id="medium" name="size" value="medium">
        Medium
      </label>
    </li>
    <li>
      <label for="large">
        <input type="radio" id="large" name="size" value="large">
        Large
      </label>
    </li>
  </ul>
</details>

<!-- With checkboxes -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li>
      <label>
        <input type="checkbox">
        Banana
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        Watermelon
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox">
        Apple
      </label>
    </li>
  </ul>
</details>

Dropdowns can be used inside a <nav> with a nested <details role="list">

Example with a dropdown as a link:

  • Brand
  • Link
  • Dropdown
    • Action
    • Another action
    • Something else here
<nav>
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#">Link</a></li>
    <li>
      <details role="list" dir="rtl">
        <summary aria-haspopup="listbox" role="link">Dropdown</summary>
        <ul role="listbox">
          <li><a>Action</a></li>
          <li><a>Another action</a></li>
          <li><a>Something else here</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

Example with a default dropdown and a dropdown as a button:

  • Dropdown
    • Action
    • Another action
    • Something else here
  • Dropdown
    • Action
    • Another action
    • Something else here
<nav>
  <ul>
    <li>
      <details role="list">
        <summary aria-haspopup="listbox">Dropdown</summary>
        <ul role="listbox">
          <li><a>Action</a></li>
          <li><a>Another action</a></li>
          <li><a>Something else here</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details role="list">
        <summary aria-haspopup="listbox" role="button">Dropdown</summary>
        <ul role="listbox">
          <li><a>Action</a></li>
          <li><a>Another action</a></li>
          <li><a>Something else here</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>

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.

  • Brand
  • Link
  • Link
  • Dropdown
    • Action
    • Another action
    • Something else here
<nav>
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li role="list" dir="rtl">
      <a href="#" aria-haspopup="listbox">Dropdown</a>
      <ul role="listbox">
        <li><a>Action</a></li>
        <li><a>Another action</a></li>
        <li><a>Something else here</a></li>
      </ul>
    </li>
  </ul>
</nav>

Code licensed MIT