mirror of
https://github.com/picocss/pico.git
synced 2025-05-08 00:25:29 -04:00
191 lines
7 KiB
HTML
191 lines
7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
${require('./_head.html') title=`Navs` description=`The essential navbar
|
|
component in pure semantic HTML.` canonical=`navs.html` }
|
|
</head>
|
|
|
|
<body>
|
|
${require('./_nav.html')}
|
|
|
|
<main class="container" id="docs">
|
|
${require('./_sidebar.html') active=`navs-link`}
|
|
|
|
<div role="document">
|
|
<section id="navs">
|
|
<hgroup>
|
|
<h1>Navs</h1>
|
|
<h2>The essential navbar component in pure semantic HTML.</h2>
|
|
</hgroup>
|
|
<article aria-label="Nav example">
|
|
<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>
|
|
<a href="#" onclick="event.preventDefault()" role="button"
|
|
>Button</a
|
|
>
|
|
</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>><<b>a</b> <i>href</i>=<u>"#"</u> <i>role</i>=<u>"button"</u>>Button</<b>a</b>></<b>li</b>>
|
|
</<b>ul</b>>
|
|
</<b>nav</b>></code></pre>
|
|
</footer>
|
|
</article>
|
|
<p>
|
|
<code><<b>ul</b>></code> are automatically distributed
|
|
horizontally.
|
|
</p>
|
|
<p><code><<b>li</b>></code> are unstyled and inlined.</p>
|
|
<article aria-label="Nav example">
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
onclick="event.preventDefault()"
|
|
class="secondary"
|
|
aria-label="Menu"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
height="16px"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="3" y1="12" x2="21" y2="12"></line>
|
|
<line x1="3" y1="6" x2="21" y2="6"></line>
|
|
<line x1="3" y1="18" x2="21" y2="18"></line>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li><strong>Brand</strong></li>
|
|
</ul>
|
|
<ul>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
onclick="event.preventDefault()"
|
|
class="secondary"
|
|
aria-label="Twitter"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
role="img"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
height="16px"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path
|
|
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<footer class="code">
|
|
<pre><code><<b>nav</b>>
|
|
<<b>ul</b>>
|
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
|
</<b>ul</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> <i>class</i>=<u>"secondary"</u>>…</<b>a</b>></<b>li</b>>
|
|
</<b>ul</b>>
|
|
</<b>nav</b>></code></pre>
|
|
</footer>
|
|
</article>
|
|
<p>
|
|
Inside <code><<b>aside</b>></code>, navs are stacked
|
|
vertically.
|
|
</p>
|
|
<article aria-label="Vertical nav example">
|
|
<aside>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
|
<li><a href="#" onclick="event.preventDefault()">Link</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
<footer class="code">
|
|
<pre><code><<b>aside</b>>
|
|
<<b>nav</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>><<b>a</b> <i>href</i>=<u>"#"</u>>Link</<b>a</b>></<b>li</b>>
|
|
</<b>ul</b>>
|
|
</<b>nav</b>>
|
|
</<b>aside</b>></code></pre>
|
|
</footer>
|
|
</article>
|
|
|
|
<p>
|
|
With <code><i>aria-label</i>=<u>"breadcrumb"</u></code
|
|
>, you can turn a nav into a breadcrumb.
|
|
</p>
|
|
|
|
<article aria-label="Breadcrumb example">
|
|
<nav aria-label="breadcrumb">
|
|
<ul>
|
|
<li>
|
|
<a href="#" onclick="event.preventDefault()">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" onclick="event.preventDefault()">Category</a>
|
|
</li>
|
|
<li>Page</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<footer class="code">
|
|
<pre><code><<b>nav</b> <i>aria-label</i>=<u>"breadcrumb"</u>>
|
|
<<b>ul</b>>
|
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Home<<b>/a</b>><<b>/li</b>>
|
|
<<b>li</b>><<b>a</b> <i>href</i>=<u>"#"</u>>Category<<b>/a</b>><<b>/li</b>>
|
|
<<b>li</b>>Page<<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>
|