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


+
+        ${require('./_footer.html')}
+
+