e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
101 lines
12 KiB
HTML
101 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--#include virtual="/_include/head.html" -->
|
|
<title>Navigation — ASW Examples</title>
|
|
<meta name="description" content="Four nav patterns — top nav,
|
|
sub-nav, sidebar nav, TOC nav. No classes. aria-current for active
|
|
state.">
|
|
</head>
|
|
<body>
|
|
<!--#include virtual="/_include/nav.html" -->
|
|
|
|
<main>
|
|
<header>
|
|
<h1>Navigation</h1>
|
|
<p data-text="lead">Four nav patterns — top nav, sub-nav, sidebar
|
|
nav, TOC nav. No classes. aria-current for active state.</p>
|
|
</header>
|
|
|
|
<p>Four patterns. Active state via <code>aria-current="page"</code>. No
|
|
class names.</p>
|
|
<h2 id="top-nav">Top nav</h2>
|
|
<p>The nav bar at the top of this page is a live demo. Two
|
|
<code><ul></code> lists: brand left, links right. Pipe dividers
|
|
are CSS — remove a link, the pipe goes with it.</p>
|
|
<div class="sourceCode" id="cb1"><pre
|
|
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">nav</span><span class="dt">></span></span>
|
|
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/"</span><span class="dt">><</span><span class="kw">strong</span><span class="dt">></span>Brand<span class="dt"></</span><span class="kw">strong</span><span class="dt">></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/docs/"</span><span class="dt">></span>Docs<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/lab/"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"page"</span><span class="dt">></span>Lab<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"/source"</span> <span class="er">data-text</span><span class="ot">=</span><span class="st">"dim"</span><span class="dt">></span>Source<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span></code></pre></div>
|
|
<h3 id="dropdown">Dropdown</h3>
|
|
<p>A <code><details></code> inside a nav list item becomes a
|
|
dropdown. No JavaScript.</p>
|
|
<nav>
|
|
<ul><li><a href="#"><strong>Brand</strong></a></li></ul>
|
|
<ul>
|
|
<li><a href="#top-nav">Docs</a></li>
|
|
<li>
|
|
<details>
|
|
<summary>More</summary>
|
|
<ul>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<h2 id="sub-navigation">Sub-navigation</h2>
|
|
<p>A horizontal strip inside <code><main></code>. Monospace,
|
|
small. Active link full-brightness; others dimmed.</p>
|
|
<nav data-subnav>
|
|
<a href="#subnav" aria-current="page">index</a>
|
|
<a href="#subnav">now</a>
|
|
<a href="#subnav">projects</a>
|
|
<a href="#subnav">status</a>
|
|
</nav>
|
|
|
|
<h2 id="sidebar-nav">Sidebar nav</h2>
|
|
<p><code>data-nav="sidebar"</code> — vertical, labelled sections, sticky
|
|
in a docs layout. The <code>aria-current="page"</code> link gets accent
|
|
background.</p>
|
|
<div class="sourceCode" id="cb2"><pre
|
|
class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">aside</span><span class="dt">></span></span>
|
|
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">nav</span> <span class="er">aria-label</span><span class="ot">=</span><span class="st">"Documentation"</span> <span class="er">data-nav</span><span class="ot">=</span><span class="st">"sidebar"</span><span class="dt">></span></span>
|
|
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>Documentation<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
|
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"index.html"</span><span class="dt">></span>Introduction<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"getting-started.html"</span><span class="dt">></span>Getting Started<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb2-8"><a href="#cb2-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>Components<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
|
<span id="cb2-9"><a href="#cb2-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb2-10"><a href="#cb2-10" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"components/nav.html"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"page"</span><span class="dt">></span>Navigation<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb2-11"><a href="#cb2-11" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb2-12"><a href="#cb2-12" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span>
|
|
<span id="cb2-13"><a href="#cb2-13" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">aside</span><span class="dt">></span></span></code></pre></div>
|
|
<h2 id="toc-nav">TOC nav</h2>
|
|
<p><code>data-nav="toc"</code> — compact in-page contents for the right
|
|
column. Pairs with <code>toc-spy.js</code> to track scroll position via
|
|
<code>aria-current</code>.</p>
|
|
<div class="sourceCode" id="cb3"><pre
|
|
class="sourceCode html"><code class="sourceCode html"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">aside</span> <span class="er">data-toc</span><span class="dt">></span></span>
|
|
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">nav</span> <span class="er">aria-label</span><span class="ot">=</span><span class="st">"On this page"</span> <span class="er">data-nav</span><span class="ot">=</span><span class="st">"toc"</span><span class="dt">></span></span>
|
|
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">small</span><span class="dt">></span>On this page<span class="dt"></</span><span class="kw">small</span><span class="dt">></span></span>
|
|
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#top-nav"</span><span class="dt">></span>Top nav<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#subnav"</span><span class="dt">></span>Sub-navigation<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">li</span><span class="dt">><</span><span class="kw">a</span> <span class="er">href</span><span class="ot">=</span><span class="st">"#sidebar-nav"</span> <span class="er">aria-current</span><span class="ot">=</span><span class="st">"true"</span><span class="dt">></span>Sidebar nav<span class="dt"></</span><span class="kw">a</span><span class="dt">></</span><span class="kw">li</span><span class="dt">></span></span>
|
|
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">ul</span><span class="dt">></span></span>
|
|
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">nav</span><span class="dt">></span></span>
|
|
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">aside</span><span class="dt">></span></span></code></pre></div>
|
|
</main>
|
|
|
|
<!--#include virtual="/_include/footer.html" -->
|
|
</body>
|
|
</html>
|