UNPKG

20.2 kBHTMLView Raw
1<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Dropdowns • Pico.css</title><meta name="description" content="Dropdown menus and custom selects without JavaScript."><link rel="shortcut icon" href="https://picocss.com/favicon.ico"><link rel="stylesheet" href="../css/pico.min.css"><link rel="stylesheet" href="css/pico.docs.min.css"><link rel="canonical" href="https://picocss.com/docs/dropdowns.html"></head><body><nav class="container-fluid"><ul><li><a href="https://picocss.com" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px"><path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/></svg></a></li><li>Documentation</li></ul><ul><li><a href="https://picocss.com#examples" class="secondary">Examples</a></li><li><a href="./" class="secondary">Docs</a></li><li><a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li></ul></nav><main class="container" id="docs"><aside><nav class="closed-on-mobile"><a href="./" class="secondary" id="toggle-docs-navigation"><svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Expand</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Collapse</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path></svg> Table of contents</a><details><summary>Getting started</summary><ul><li><a href="./" id="start-link" class="secondary">Usage</a></li><li><a href="./themes.html" id="themes-link" class="secondary">Themes</a></li><li><a href="./customization.html" id="customization-link" class="secondary">Customization</a></li><li><a href="./classless.html" id="classless-link" class="secondary">Class-less version</a></li><li><a href="./rtl.html" id="rtl-link" class="secondary">RTL</a></li></ul></details><details><summary>Layout</summary><ul><li><a href="./containers.html" id="containers-link" class="secondary">Containers</a></li><li><a href="./grid.html" id="grid-link" class="secondary">Grid</a></li><li><a href="./scroller.html" id="scroller-link" class="secondary">Horizontal scroller</a></li></ul></details><details><summary>Elements</summary><ul><li><a href="./typography.html" id="typography-link" class="secondary">Typography</a></li><li><a href="./buttons.html" id="buttons-link" class="secondary">Buttons</a></li><li><a href="./forms.html" id="forms-link" class="secondary">Forms</a></li><li><a href="./tables.html" id="tables-link" class="secondary">Tables</a></li></ul></details><details><summary>Components</summary><ul><li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li><li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li><li><a href="./dropdowns.html" id="dropdowns-link" class="secondary">Dropdowns</a></li><li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li><li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li><li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li></ul></details><details><summary>Utilities</summary><ul><li><a href="./loading.html" id="loading-link" class="secondary">Loading</a></li><li><a href="./tooltips.html" id="tooltips-link" class="secondary">Tooltips</a></li></ul></details><details><summary>Extend</summary><ul><li><a href="./we-love-classes.html" id="we-love-classes-link" class="secondary">We love .classes</a></li></ul></details></nav><script>const activeLink=document.querySelector("aside a#dropdowns-link"),parentAccordion=activeLink.closest("details");activeLink.setAttribute("aria-current","page"),parentAccordion.setAttribute("open","true")</script></aside><div role="document"><section id="dropdown"><hgroup><h1>Dropdowns</h1><h2>Dropdown menus and custom selects without JavaScript.</h2></hgroup><p>Dropdowns are built with <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code> as a wrapper and <code>&lt;<b>summary</b>&gt;</code> and <code>&lt;<b>ul</b>&gt;</code> as direct children.</p><p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html">&lt;select&gt;</a> by default.</p><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="disabled" selected="selected">Select</option><option>Option</option><option>Another option</option><option>Something else here</option></select><footer class="code"><pre><code><em>&lt;!-- Dropdown --&gt;</em>
2&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
3 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
4 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
5 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
6 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
7 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
8 &lt;/<b>ul</b>&gt;
9&lt;/<b>details</b>&gt;
10
11<em>&lt;!-- Select --&gt;</em>
12&lt;<b>select</b>&gt;
13 &lt;<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>&gt;Select&lt;/<b>option</b>&gt;
14 &lt;<b>option</b>&gt;…&lt;/<b>option</b>&gt;
15&lt;/<b>select</b>&gt;
16</code></pre></footer></article><p><code>&lt;<b>summary</b> <i>role</i>=<u>"button"</u>&gt;</code> transforms the dropdown into a button.</p><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><em>&lt;!-- Primary --&gt;</em>
17&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
18 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;
19 Dropdown as a button 1
20 &lt;/<b>summary</b>&gt;
21 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
22 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
23 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
24 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
25 &lt;/<b>ul</b>&gt;
26&lt;/<b>details</b>&gt;
27
28<em>&lt;!-- Secondary --&gt;</em>
29&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
30 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>&gt;
31 Dropdown as a button 2
32 &lt;/<b>summary</b>&gt;
33 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
34 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
35 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
36 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
37 &lt;/<b>ul</b>&gt;
38&lt;/<b>details</b>&gt;
39
40<em>&lt;!-- Contrast --&gt;</em>
41&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
42 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>&gt;
43 Dropdown as a button 3
44 &lt;/<b>summary</b>&gt;
45 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
46 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
47 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
48 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
49 &lt;/<b>ul</b>&gt;
50&lt;/<b>details</b>&gt;
51</code></pre></footer></article><p>Dropdowns can be used as custom selects with <code>&lt;<b>input</b> <i>type</i>=<u>"radio"</u>&gt;</code> or <code>&lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;</code></p><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><em>&lt;!-- With radio buttons --&gt;</em>
52&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
53 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
54 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
55 &lt;<b>li</b>&gt;
56 &lt;<b>label</b> <i>for</i>=<u>"small"</u>&gt;
57 &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u>&gt;
58 Small
59 &lt;/<b>label</b>&gt;
60 &lt;/<b>li</b>&gt;
61 &lt;<b>li</b>&gt;
62 &lt;<b>label</b> <i>for</i>=<u>"medium"</u>&gt;
63 &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>&gt;
64 Medium
65 &lt;/<b>label</b>&gt;
66 &lt;/<b>li</b>&gt;
67 &lt;<b>li</b>&gt;
68 &lt;<b>label</b> <i>for</i>=<u>"large"</u>&gt;
69 &lt;<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>&gt;
70 Large
71 &lt;/<b>label</b>&gt;
72 &lt;/<b>li</b>&gt;
73 &lt;/<b>ul</b>&gt;
74&lt;/<b>details</b>&gt;
75
76<em>&lt;!-- With checkboxes --&gt;</em>
77&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
78 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
79 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
80 &lt;<b>li</b>&gt;
81 &lt;<b>label</b>&gt;
82 &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
83 Banana
84 &lt;/<b>label</b>&gt;
85 &lt;/<b>li</b>&gt;
86 &lt;<b>li</b>&gt;
87 &lt;<b>label</b>&gt;
88 &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
89 Watermelon
90 &lt;/<b>label</b>&gt;
91 &lt;/<b>li</b>&gt;
92 &lt;<b>li</b>&gt;
93 &lt;<b>label</b>&gt;
94 &lt;<b>input</b> <i>type</i>=<u>"checkbox"</u>&gt;
95 Apple
96 &lt;/<b>label</b>&gt;
97 &lt;/<b>li</b>&gt;
98 &lt;/<b>ul</b>&gt;
99&lt;/<b>details</b>&gt;
100
101 </code></pre></footer></article><p>Dropdowns can be used inside a <a href="navs.html">&lt;nav&gt;</a> with a nested <code>&lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;</code></p><p>Example with a dropdown as a link:</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></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>&lt;<b>nav</b>&gt;
102 &lt;<b>ul</b>&gt;
103 &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
104 &lt;/<b>ul</b>&gt;
105 &lt;<b>ul</b>&gt;
106 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
107 &lt;<b>li</b>&gt;
108 &lt;<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
109 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
110 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
111 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
112 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
113 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
114 &lt;/<b>ul</b>&gt;
115 &lt;/<b>details</b>&gt;
116 &lt;/<b>li</b>&gt;
117 &lt;/<b>ul</b>&gt;
118&lt;/<b>nav</b>&gt;</code></pre></footer></article><p>Example with a default dropdown and a dropdown as a button:</p><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>&lt;<b>nav</b>&gt;
119 &lt;<b>ul</b>&gt;
120 &lt;<b>li</b>&gt;
121 &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
122 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
123 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
124 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
125 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
126 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
127 &lt;/<b>ul</b>&gt;
128 &lt;/<b>details</b>&gt;
129 &lt;/<b>li</b>&gt;
130 &lt;<b>li</b>&gt;
131 &lt;<b>details</b> <i>role</i>=<u>"list"</u>&gt;
132 &lt;<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>&gt;Dropdown&lt;/<b>summary</b>&gt;
133 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
134 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
135 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
136 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
137 &lt;/<b>ul</b>&gt;
138 &lt;/<b>details</b>&gt;
139 &lt;/<b>li</b>&gt;
140 &lt;/<b>ul</b>&gt;
141&lt;/<b>nav</b>&gt;</code></pre></footer></article><p>You can also use <code>&lt;<b>li</b> <i>role</i>=<u>"list"</u>&gt;</code> as a nested wrapper to render a list as a dropdown.</p><p>ℹ️&nbsp;This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p><article aria-label="Dropdowns inside a nav"><nav><ul><li><strong>Brand</strong></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>&lt;<b>nav</b>&gt;
142 &lt;<b>ul</b>&gt;
143 &lt;<b>li</b>&gt;&lt;<b>strong</b>&gt;Brand&lt;/<b>strong</b>&gt;&lt;/<b>li</b>&gt;
144 &lt;/<b>ul</b>&gt;
145 &lt;<b>ul</b>&gt;
146 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
147 &lt;<b>li</b>&gt;&lt;<b>a</b> <i>href</i>=<u>"#"</u>&gt;Link&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
148 &lt;<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>&gt;
149 &lt;<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>&gt;Dropdown&lt;/<b>a</b>&gt;
150 &lt;<b>ul</b> <i>role</i>=<u>"listbox"</u>&gt;
151 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
152 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Another action&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
153 &lt;<b>li</b>&gt;&lt;<b>a</b>&gt;Something else here&lt;/<b>a</b>&gt;&lt;/<b>li</b>&gt;
154 &lt;/<b>ul</b>&gt;
155 &lt;/<b>li</b>&gt;
156 &lt;/<b>ul</b>&gt;
157&lt;/<b>nav</b>&gt;</code></pre></footer></article></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script></body></html>
\No newline at end of file