Dropdowns

Dropdown menus and custom selects without JavaScript.

Dropdowns are built with <details role="list"> as a wrapper and <summary> and <ul> as direct childs.

For style consistency with the form elements, dropdowns are styled as a <select> by default.

<!-- Dropdown -->
<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li><a>Mauris vehicula velit</a></li>
    <li><a>Nunc dignissim sapien</a></li>
    <li><a>Aenean egestas quam</a></li>
  </ul>
</details>

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

role="button" on the <summary> element can be used to turn the dropdown into a button.

<!-- Primary -->
<details role="list">
  <summary aria-haspopup="listbox" role="button">
    Dropdown as a button 1
  </summary>
  <ul role="listbox">
    …
  </ul>
</details>

<!-- Secondary -->
<details role="list">
  <summary aria-haspopup="listbox" role="button" class="secondary">
    Dropdown as a button 2
  </summary>
  <ul role="listbox">
    …
  </ul>
</details>

<!-- Contrast -->
<details role="list">
  <summary aria-haspopup="listbox" role="button" class="contrast">
    Dropdown as a button 3
  </summary>
  <ul role="listbox">
    …
  </ul>
</details>

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

<!-- 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>