diff options
Diffstat (limited to 'htmx/static/pico-1.5.11/docs/src/navs.html')
| -rw-r--r-- | htmx/static/pico-1.5.11/docs/src/navs.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/htmx/static/pico-1.5.11/docs/src/navs.html b/htmx/static/pico-1.5.11/docs/src/navs.html new file mode 100644 index 0000000..f109deb --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/navs.html @@ -0,0 +1,157 @@ +<!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>
\ No newline at end of file |