trentuna/asw
8
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions
asw/content/docs/navigation.md
Vigilio Desto da1d02ccd1
Port vault section (5 pages) and docs section (11 pages) 
- content/vault/: _index.md, diff.md, session.md, status.md, tasks.md, wikilinks.md
- content/docs/: _index.md, introduction, tokens, reset, semantic-html,
  components, data-attributes, navigation, layouts, charts, chroma, accordion-dialog

96 pages build clean (was 36). Docs use sidebar nav + TOC layout.
Vault uses sidebar with section fallback (no vault menu configured yet).
URLs fixed: playground refs → asw.trentuna.com.

Closes: asw#12, asw#9
2026-04-10 18:40:50 +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