trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/site/content/docs/navigation.md
Ludo 910b0e42a6
refactor: restructure repo into src/ site/ dist/ vendor/ packs/ 
Separate framework source from website:
- src/layers/ + src/main.css: CSS framework source (was assets/css/)
- site/: Hugo website (content/, layouts/, hugo.toml)
- dist/: built output (asw.css, asw.min.css)
- vendor/open-props/: vendored dependency with version tracking
- Hugo module mounts: dist/ → static, site runs from site/

Build: hugo --source site/ passes (105 pages).
npm run build produces dist/asw.css.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 15:12:42 +02:00

3.2 KiB
Raw Blame History

title description type weight date tags ai-disclosure ai-model ai-provider
Navigation Breadcrumb trails and step sequences for orienting users in docs and agentic workflows. docs 35 2026-04-09
navigation
components
reference
generated claude-sonnet-4-5 Anthropic

ASW provides two navigation components for orientation and workflow sequencing: breadcrumb for hierarchical location, and steps for pipeline progress.

Breadcrumb

Shows the current page's position in a site hierarchy. Uses <nav data-role="breadcrumb"> with a plain <ol> — no classes needed.

<nav data-role="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li aria-current="page">Token System</li>
  </ol>
</nav>
  • Separators (/) are drawn by CSS ::before — no markup needed.
  • The current page item gets aria-current="page". It renders as plain text (no link), full colour, slightly bolder.
  • Wraps on narrow viewports.

Longer trail

<nav data-role="breadcrumb" aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li><a href="/docs/components/">Components</a></li>
    <li aria-current="page">Navigation</li>
  </ol>
</nav>

Steps

A horizontal workflow sequence. Apply data-role="steps" to an <ol>. Each <li> takes a data-status attribute.

data-status Node Label Use
complete ✓ (accent) var(--text-2) Finished step
active number (filled) bold, full colour Current step
pending number (dim) var(--text-3) Future step 
<ol data-role="steps">
  <li data-status="complete"><span>Plan</span></li>
  <li data-status="complete"><span>Scaffold</span></li>
  <li data-status="active"><span>Build</span></li>
  <li data-status="pending"><span>Review</span></li>
  <li data-status="pending"><span>Deploy</span></li>
</ol>

Steps distribute evenly across the available width. Connector lines between steps turn accent-coloured once the preceding step is complete.

Agentic task pipeline

<ol data-role="steps">
  <li data-status="complete"><span>Wake</span></li>
  <li data-status="complete"><span>Orient</span></li>
  <li data-status="active"><span>Work</span></li>
  <li data-status="pending"><span>Record</span></li>
  <li data-status="pending"><span>Sleep</span></li>
</ol>

Vertical layout

Add data-layout="vertical" for a top-down flow — useful in sidebars or narrow containers.

<ol data-role="steps" data-layout="vertical">
  <li data-status="complete"><span>Fetch task file</span></li>
  <li data-status="complete"><span>Read source CSS</span></li>
  <li data-status="active"><span>Implement components</span></li>
  <li data-status="pending"><span>Build and verify</span></li>
  <li data-status="pending"><span>Signal done</span></li>
</ol>

Related

  • Data Attributes — data-role, data-status, and the full attribute vocabulary
  • Layouts — data-layout values including vertical
  • Components — callouts, tasks, and other component patterns