</code></pre></footer></article><p><code><<b>summary</b><i>role</i>=<u>"button"</u>></code> transforms the dropdown into a button.</p><articlearia-label="Dropdowns as Buttons"><detailsrole="list"><summaryaria-haspopup="listbox"role="button">Dropdown as a button 1</summary><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></details><detailsrole="list"><summaryaria-haspopup="listbox"role="button"class="secondary">Dropdown as a button 2</summary><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></details><detailsrole="list"><summaryaria-haspopup="listbox"role="button"class="contrast">Dropdown as a button 3</summary><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></details><footerclass="code"><pre><code><em><!-- Primary --></em>
</code></pre></footer></article><p>Dropdowns can be used as custom selects with <code><<b>input</b><i>type</i>=<u>"radio"</u>></code> or <code><<b>input</b><i>type</i>=<u>"checkbox"</u>></code></p><articlearia-label="Dropdowns with radio buttons or checkboxes"><detailsrole="list"><summaryaria-haspopup="listbox">Select single element</summary><ulrole="listbox"><li><labelfor="small"><inputtype="radio"id="small"name="size"value="small"/> Small</label></li><li><labelfor="medium"><inputtype="radio"id="medium"name="size"value="medium"/> Medium</label></li><li><labelfor="large"><inputtype="radio"id="large"name="size"value="large"/> Large</label></li></ul></details><detailsrole="list"><summaryaria-haspopup="listbox">Select multiple elements</summary><ulrole="listbox"><li><label><inputtype="checkbox"/> Banana</label></li><li><label><inputtype="checkbox"/> Watermelon</label></li><li><label><inputtype="checkbox"/> Apple</label></li></ul></details><footerclass="code"><pre><code><em><!-- With radio buttons --></em>
</code></pre></footer></article><p>Dropdowns can be used inside a <ahref="navs.html"><nav></a> with a nested <code><<b>details</b><i>role</i>=<u>"list"</u>></code></p><p>Example with a dropdown as a link:</p><articlearia-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><ahref="#"onclick="event.preventDefault()">Link</a></li><li><detailsrole="list"dir="rtl"><summaryaria-haspopup="listbox"role="link">Dropdown</summary><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footerclass="code"><pre><code><<b>nav</b>>
</<b>nav</b>></code></pre></footer></article><p>Example with a default dropdown and a dropdown as a button:</p><articlearia-label="Dropdowns inside a nav"><nav><ul><li><detailsrole="list"><summaryaria-haspopup="listbox">Dropdown</summary><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></details></li><li><detailsrole="list"><summaryaria-haspopup="listbox"role="button">Dropdown</summary><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></details></li></ul></nav><footerclass="code"><pre><code><<b>nav</b>>
</<b>nav</b>></code></pre></footer></article><p>You can also use <code><<b>li</b><i>role</i>=<u>"list"</u>></code> as a nested wrapper to render a list as a dropdown.</p><p>ℹ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p><articlearia-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></li></ul><ul><li><ahref="#"onclick="event.preventDefault()">Link</a></li><li><ahref="#"onclick="event.preventDefault()">Link</a></li><lirole="list"dir="rtl"><ahref="#"onclick="event.preventDefault()"aria-haspopup="listbox">Dropdown</a><ulrole="listbox"><li><ahref="#"onclick="event.preventDefault()">Action</a></li><li><ahref="#"onclick="event.preventDefault()">Another action</a></li><li><ahref="#"onclick="event.preventDefault()">Something else here</a></li></ul></li></ul></nav><footerclass="code"><pre><code><<b>nav</b>>
