Navigation

Breadcrumb trails and step sequences for orienting users in docs and agentic workflows.

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

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>

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>