mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 18:06:14 -04:00
484 lines
19 KiB
HTML
484 lines
19 KiB
HTML
<!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>
|
||
<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>
|
||
<p>
|
||
For style consistency with the form elements, dropdowns are styled
|
||
like a <a href="forms.html"><select></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 selected>Select</option>
|
||
<option>Option</option>
|
||
<option>Another option</option>
|
||
<option>Something else here</option>
|
||
</select>
|
||
<footer class="code">
|
||
<pre><code><em><!-- Dropdown --></em>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
|
||
<em><!-- Select --></em>
|
||
<<b>select</b>>
|
||
<<b>option</b> <i>value</i>=<u>""</u> <i>disabled selected</i>>Select</<b>option</b>>
|
||
<<b>option</b>>…</<b>option</b>>
|
||
</<b>select</b>>
|
||
</code></pre>
|
||
</footer>
|
||
</article>
|
||
<p>
|
||
<code><<b>summary</b> <i>role</i>=<u>"button"</u>></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><!-- Primary --></em>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>
|
||
Dropdown as a button 1
|
||
</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
|
||
<em><!-- Secondary --></em>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>
|
||
Dropdown as a button 2
|
||
</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
|
||
<em><!-- Contrast --></em>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"contrast"</u>>
|
||
Dropdown as a button 3
|
||
</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
</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>
|
||
<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><!-- With radio buttons --></em>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>>
|
||
<<b>label</b> <i>for</i>=<u>"small"</u>>
|
||
<<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>>
|
||
Small
|
||
</<b>label</b>>
|
||
</<b>li</b>>
|
||
<<b>li</b>>
|
||
<<b>label</b> <i>for</i>=<u>"medium"</u>>
|
||
<<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>>
|
||
Medium
|
||
</<b>label</b>>
|
||
</<b>li</b>>
|
||
<<b>li</b>>
|
||
<<b>label</b> <i>for</i>=<u>"large"</u>>
|
||
<<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>>
|
||
Large
|
||
</<b>label</b>>
|
||
</<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
|
||
<em><!-- With checkboxes --></em>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>>
|
||
<<b>label</b>>
|
||
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||
Banana
|
||
</<b>label</b>>
|
||
</<b>li</b>>
|
||
<<b>li</b>>
|
||
<<b>label</b>>
|
||
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||
Watermelon
|
||
</<b>label</b>>
|
||
</<b>li</b>>
|
||
<<b>li</b>>
|
||
<<b>label</b>>
|
||
<<b>input</b> <i>type</i>=<u>"checkbox"</u>>
|
||
Apple
|
||
</<b>label</b>>
|
||
</<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
</code></pre>
|
||
</footer>
|
||
</article>
|
||
<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>
|
||
<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><<b>nav</b>>
|
||
<<b>ul</b>>
|
||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
<<b>ul</b>>
|
||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"link"</u>>Dropdown</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
</<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>nav</b>></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><<b>nav</b>>
|
||
<<b>ul</b>>
|
||
<<b>li</b>>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
</<b>li</b>>
|
||
<<b>li</b>>
|
||
<<b>details</b> <i>role</i>=<u>"list"</u>>
|
||
<<b>summary</b> <i>aria-haspopup</i>=<u>"listbox"</u> <i>role</i>=<u>"button"</u>>Dropdown</<b>summary</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>details</b>>
|
||
</<b>li</b>>
|
||
</<b>ul</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>
|
||
<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><<b>nav</b>>
|
||
<<b>ul</b>>
|
||
<<b>li</b>><<b>strong</b>>Brand</<b>strong</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
<<b>ul</b>>
|
||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
||
<<b>li</b> <i>role</i>=<u>"list"</u> <i>dir</i>=<u>"rtl"</u>>
|
||
<<b>a</b> <i>href</i>=<u>"#"</u> <i>aria-haspopup</i>=<u>"listbox"</u>>Dropdown</<b>a</b>>
|
||
<<b>ul</b> <i>role</i>=<u>"listbox"</u>>
|
||
<<b>li</b>><<b>a</b>>Action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Another action</<b>a</b>></<b>li</b>>
|
||
<<b>li</b>><<b>a</b>>Something else here</<b>a</b>></<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>li</b>>
|
||
</<b>ul</b>>
|
||
</<b>nav</b>></code></pre>
|
||
</footer>
|
||
</article>
|
||
</section>
|
||
|
||
${require('./_footer.html')}
|
||
</div>
|
||
</main>
|
||
<script src="js/commons.min.js"></script>
|
||
</body>
|
||
</html>
|