vue-picocss

<!doctype html> <html lang="en"> <head> ${require('./_head.html') title="Dropdowns" description="Dropdown menus and custom selects without JavaScript." canonical="dropdowns.html" } </head> <body> ${require('./_nav.html')} <main class="container" id="docs"> ${require('./_sidebar.html') active="dropdowns-link"} <div role="document"> <section id="dropdown"> <hgroup> <h1>Dropdowns</h1> <h2>Dropdown menus and custom selects without JavaScript.</h2> </hgroup> Dropdowns are built with <code><details role="list"></code> as a wrapper and <code><summary></code> and <code><ul></code> as direct children. For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><select></a> by default. <article aria-label="Dropdowns as Selects"> <details role="list"> <summary aria-haspopup="listbox">Dropdown</summary> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </details> <select required> <option value="" disabled selected>Select</option> <option>Option</option> <option>Another option</option> <option>Something else here</option> </select> <footer class="code"> <pre><code> <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> <option value="" disabled selected>Select</option> <option>…</option> </select> </code></pre> </footer> </article> <code><summary role="button"></code> transforms the dropdown into a button. <article aria-label="Dropdowns as Buttons"> <details role="list"> <summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </details> <details role="list"> <summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </details> <details role="list"> <summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </details> <footer class="code"> <pre><code> <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>  <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>  <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> </code></pre> </footer> </article> Dropdowns can be used as custom selects with <code><input type="radio"></code> or <code><input type="checkbox"></code> <article aria-label="Dropdowns with radio buttons or checkboxes"> <details role="list"> <summary aria-haspopup="listbox">Select single element</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> <details role="list"> <summary aria-haspopup="listbox">Select multiple elements</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> <footer class="code"> <pre><code> <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>  <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> </footer> </article> Dropdowns can be used inside a <a href="navs.html"><nav></a> with a nested <code><details role="list"></code> Example with a dropdown as a link: <article aria-label="Dropdowns inside a nav"> <nav> <ul> <li>Brand</li> </ul> <ul> <li><a href="#" onclick="event.preventDefault()">Link</a></li> <li> <details role="list" dir="rtl"> <summary aria-haspopup="listbox" role="link">Dropdown</summary> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </details> </li> </ul> </nav> <footer class="code"> <pre><code><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></code></pre> </footer> </article> Example with a default dropdown and a dropdown as a button: <article aria-label="Dropdowns inside a nav"> <nav> <ul> <li> <details role="list"> <summary aria-haspopup="listbox">Dropdown</summary> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">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 href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </details> </li> </ul> </nav> <footer class="code"> <pre><code><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></code></pre> </footer> </article> You can also use <code><li role="list"></code> 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. <article aria-label="Dropdowns inside a nav"> <nav> <ul> <li>Brand</li> </ul> <ul> <li><a href="#" onclick="event.preventDefault()">Link</a></li> <li><a href="#" onclick="event.preventDefault()">Link</a></li> <li role="list" dir="rtl"> <a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a> <ul role="listbox"> <li><a href="#" onclick="event.preventDefault()">Action</a></li> <li><a href="#" onclick="event.preventDefault()">Another action</a></li> <li><a href="#" onclick="event.preventDefault()">Something else here</a></li> </ul> </li> </ul> </nav> <footer class="code"> <pre><code><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></pre> </footer> </article> </section> ${require('./_footer.html')} </div> </main> <script src="js/commons.min.js"></script> </body> </html>