@picocss/pico
Version:
Minimal CSS Framework for semantic HTML
128 lines (116 loc) • 5.19 kB
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>
</section>
${require('./_footer.html')}
</div>
</main>
<script src="js/commons.min.js"></script>
</body>
</html>