1 | <!doctype html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | ${require('./_head.html')
|
5 | title="Dropdowns"
|
6 | description="Dropdown menus and custom selects without JavaScript."
|
7 | canonical="dropdowns.html"
|
8 | }
|
9 | </head>
|
10 |
|
11 | <body>
|
12 | ${require('./_nav.html')}
|
13 |
|
14 | <main class="container" id="docs">
|
15 | ${require('./_sidebar.html') active="dropdowns-link"}
|
16 |
|
17 | <div role="document">
|
18 | <section id="dropdown">
|
19 | <hgroup>
|
20 | <h1>Dropdowns</h1>
|
21 | <h2>Dropdown menus and custom selects without JavaScript.</h2>
|
22 | </hgroup>
|
23 | <p>Dropdowns are built with <code><<b>details</b> <i>role</i>=<u>"list"</u>></code> as a wrapper and <code><<b>summary</b>></code> and <code><<b>ul</b>></code> as direct children.</p>
|
24 | <p>For style consistency with the form elements, dropdowns are styled like a <a href="forms.html"><select></a> by default.</p>
|
25 | <article aria-label="Dropdowns as Selects">
|
26 | <details role="list">
|
27 | <summary aria-haspopup="listbox">Dropdown</summary>
|
28 | <ul role="listbox">
|
29 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
30 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
31 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
32 | </ul>
|
33 | </details>
|
34 | <select required>
|
35 | <option value="" disabled selected>Select</option>
|
36 | <option>Option</option>
|
37 | <option>Another option</option>
|
38 | <option>Something else here</option>
|
39 | </select>
|
40 | <footer class="code">
|
41 |
|
42 | <pre><code><em><!-- Dropdown --></em>
|
43 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
44 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
45 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
46 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
47 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
48 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
49 | </<b>ul</b>>
|
50 | </<b>details</b>>
|
51 |
|
52 | <em><!-- Select --></em>
|
53 | <<b>select</b></u>>
|
54 | <<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>>Select</<b>option</b>>
|
55 | <<b>option</b>>…</<b>option</b>>
|
56 | </<b>select</b>>
|
57 | </code></pre>
|
58 |
|
59 | </footer>
|
60 | </article>
|
61 | <p><code><<b>summary</b> <i>role</i>=<u>"button"</u>></code> transforms the dropdown into a button.</p>
|
62 | <article aria-label="Dropdowns as Buttons">
|
63 | <details role="list">
|
64 | <summary aria-haspopup="listbox" role="button">Dropdown as a button 1</summary>
|
65 | <ul role="listbox">
|
66 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
67 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
68 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
69 | </ul>
|
70 | </details>
|
71 | <details role="list">
|
72 | <summary aria-haspopup="listbox" role="button" class="secondary">Dropdown as a button 2</summary>
|
73 | <ul role="listbox">
|
74 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
75 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
76 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
77 | </ul>
|
78 | </details>
|
79 | <details role="list">
|
80 | <summary aria-haspopup="listbox" role="button" class="contrast">Dropdown as a button 3</summary>
|
81 | <ul role="listbox">
|
82 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
83 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
84 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
85 | </ul>
|
86 | </details>
|
87 | <footer class="code">
|
88 |
|
89 | <pre><code><em><!-- Primary --></em>
|
90 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
91 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>
|
92 | Dropdown as a button 1
|
93 | </<b>summary</b>>
|
94 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
95 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
96 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
97 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
98 | </<b>ul</b>>
|
99 | </<b>details</b>>
|
100 |
|
101 | <em><!-- Secondary --></em>
|
102 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
103 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>
|
104 | Dropdown as a button 2
|
105 | </<b>summary</b>>
|
106 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
107 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
108 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
109 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
110 | </<b>ul</b>>
|
111 | </<b>details</b>>
|
112 |
|
113 | <em><!-- Contrast --></em>
|
114 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
115 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>
|
116 | Dropdown as a button 3
|
117 | </<b>summary</b>>
|
118 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
119 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
120 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
121 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
122 | </<b>ul</b>>
|
123 | </<b>details</b>>
|
124 | </code></pre>
|
125 |
|
126 | </footer>
|
127 | </article>
|
128 | <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>
|
129 | <article aria-label="Dropdowns with radio buttons or checkboxes">
|
130 | <details role="list">
|
131 | <summary aria-haspopup="listbox">Select single element</summary>
|
132 | <ul role="listbox">
|
133 | <li>
|
134 | <label for="small">
|
135 | <input type="radio" id="small" name="size" value="small" />
|
136 | Small
|
137 | </label>
|
138 | </li>
|
139 | <li>
|
140 | <label for="medium">
|
141 | <input type="radio" id="medium" name="size" value="medium" />
|
142 | Medium
|
143 | </label>
|
144 | </li>
|
145 | <li>
|
146 | <label for="large">
|
147 | <input type="radio" id="large" name="size" value="large" />
|
148 | Large
|
149 | </label>
|
150 | </li>
|
151 | </ul>
|
152 | </details>
|
153 | <details role="list">
|
154 | <summary aria-haspopup="listbox">Select multiple elements</summary>
|
155 | <ul role="listbox">
|
156 | <li>
|
157 | <label>
|
158 | <input type="checkbox" />
|
159 | Banana
|
160 | </label>
|
161 | </li>
|
162 | <li>
|
163 | <label>
|
164 | <input type="checkbox" />
|
165 | Watermelon
|
166 | </label>
|
167 | </li>
|
168 | <li>
|
169 | <label>
|
170 | <input type="checkbox" />
|
171 | Apple
|
172 | </label>
|
173 | </li>
|
174 | </ul>
|
175 | </details>
|
176 | <footer class="code">
|
177 |
|
178 | <pre><code><em><!-- With radio buttons --></em>
|
179 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
180 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
181 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
182 | <<b>li</b>>
|
183 | <<b>label</b> <i>for</i>=<u>"small"</u>>
|
184 | <<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>>
|
185 | Small
|
186 | </<b>label</b>>
|
187 | </<b>li</b>>
|
188 | <<b>li</b>>
|
189 | <<b>label</b> <i>for</i>=<u>"medium"</u>>
|
190 | <<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>>
|
191 | Medium
|
192 | </<b>label</b>>
|
193 | </<b>li</b>>
|
194 | <<b>li</b>>
|
195 | <<b>label</b> <i>for</i>=<u>"large"</u>>
|
196 | <<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>>
|
197 | Large
|
198 | </<b>label</b>>
|
199 | </<b>li</b>>
|
200 | </<b>ul</b>>
|
201 | </<b>details</b>>
|
202 |
|
203 | <em><!-- With checkboxes --></em>
|
204 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
205 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
206 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
207 | <<b>li</b>>
|
208 | <<b>label</b>>
|
209 | <<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
210 | Banana
|
211 | </<b>label</b>>
|
212 | </<b>li</b>>
|
213 | <<b>li</b>>
|
214 | <<b>label</b>>
|
215 | <<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
216 | Watermelon
|
217 | </<b>label</b>>
|
218 | </<b>li</b>>
|
219 | <<b>li</b>>
|
220 | <<b>label</b>>
|
221 | <<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
222 | Apple
|
223 | </<b>label</b>>
|
224 | </<b>li</b>>
|
225 | </<b>ul</b>>
|
226 | </<b>details</b>>
|
227 |
|
228 | </footer>
|
229 | </article>
|
230 | <p>Dropdowns can be used inside a <a href="navs.html"><nav></a> with a nested <code><<b>details</b> <i>role</i>=<u>"list"</u>></code></p>
|
231 | <p>Example with a dropdown as a link:</p>
|
232 | <article aria-label="Dropdowns inside a nav">
|
233 | <nav>
|
234 | <ul>
|
235 | <li><strong>Brand</strong></li>
|
236 | </ul>
|
237 | <ul>
|
238 | <li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
239 | <li>
|
240 | <details role="list" dir="rtl">
|
241 | <summary aria-haspopup="listbox" role="link">Dropdown</summary>
|
242 | <ul role="listbox">
|
243 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
244 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
245 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
246 | </ul>
|
247 | </details>
|
248 | </li>
|
249 | </ul>
|
250 | </nav>
|
251 | <footer class="code">
|
252 |
|
253 | <pre><code><<b>nav</b>>
|
254 | <<b>ul</b>>
|
255 | <<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
256 | </<b>ul</b>>
|
257 | <<b>ul</b>>
|
258 | <<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
259 | <<b>li</b>>
|
260 | <<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
261 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>>Dropdown</<b>summary</b>>
|
262 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
263 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
264 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
265 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
266 | </<b>ul</b>>
|
267 | </<b>details</b>>
|
268 | </<b>li</b>>
|
269 | </<b>ul</b>>
|
270 | </<b>nav</b>></code></pre>
|
271 |
|
272 | </footer>
|
273 | </article>
|
274 | <p>Example with a default dropdown and a dropdown as a button:</p>
|
275 | <article aria-label="Dropdowns inside a nav">
|
276 | <nav>
|
277 | <ul>
|
278 | <li>
|
279 | <details role="list">
|
280 | <summary aria-haspopup="listbox">Dropdown</summary>
|
281 | <ul role="listbox">
|
282 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
283 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
284 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
285 | </ul>
|
286 | </details>
|
287 | </li>
|
288 | <li>
|
289 | <details role="list">
|
290 | <summary aria-haspopup="listbox" role="button">Dropdown</summary>
|
291 | <ul role="listbox">
|
292 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
293 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
294 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
295 | </ul>
|
296 | </details>
|
297 | </li>
|
298 | </ul>
|
299 | </nav>
|
300 | <footer class="code">
|
301 |
|
302 | <pre><code><<b>nav</b>>
|
303 | <<b>ul</b>>
|
304 | <<b>li</b>>
|
305 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
306 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
307 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
308 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
309 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
310 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
311 | </<b>ul</b>>
|
312 | </<b>details</b>>
|
313 | </<b>li</b>>
|
314 | <<b>li</b>>
|
315 | <<b>details</b> <i>role</i>=<u>"list"</u>>
|
316 | <<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>Dropdown</<b>summary</b>>
|
317 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
318 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
319 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
320 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
321 | </<b>ul</b>>
|
322 | </<b>details</b>>
|
323 | </<b>li</b>>
|
324 | </<b>ul</b>>
|
325 | </<b>nav</b>></code></pre>
|
326 |
|
327 | </footer>
|
328 | </article>
|
329 | <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>
|
330 | <p>ℹ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.</p>
|
331 | <article aria-label="Dropdowns inside a nav">
|
332 | <nav>
|
333 | <ul>
|
334 | <li><strong>Brand</strong></li>
|
335 | </ul>
|
336 | <ul>
|
337 | <li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
338 | <li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
339 | <li role="list" dir="rtl">
|
340 | <a href="#" onclick="event.preventDefault()" aria-haspopup="listbox">Dropdown</a>
|
341 | <ul role="listbox">
|
342 | <li><a href="#" onclick="event.preventDefault()">Action</a></li>
|
343 | <li><a href="#" onclick="event.preventDefault()">Another action</a></li>
|
344 | <li><a href="#" onclick="event.preventDefault()">Something else here</a></li>
|
345 | </ul>
|
346 | </li>
|
347 | </ul>
|
348 | </nav>
|
349 | <footer class="code">
|
350 |
|
351 | <pre><code><<b>nav</b>>
|
352 | <<b>ul</b>>
|
353 | <<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
354 | </<b>ul</b>>
|
355 | <<b>ul</b>>
|
356 | <<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
357 | <<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
358 | <<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
359 | <<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>a</b>>
|
360 | <<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
361 | <<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
362 | <<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
363 | <<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
364 | </<b>ul</b>>
|
365 | </<b>li</b>>
|
366 | </<b>ul</b>>
|
367 | </<b>nav</b>></code></pre>
|
368 |
|
369 | </footer>
|
370 | </article>
|
371 | </section>
|
372 |
|
373 | ${require('./_footer.html')}
|
374 |
|
375 | </div>
|
376 | </main>
|
377 | <script src="js/commons.min.js"></script>
|
378 | </body>
|
379 | </html>
|