mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
127 lines
5 KiB
HTML
127 lines
5 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()">Link</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>>Link</<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>
|