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 -->
+<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.

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

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

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

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

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