---
title: "Navigation"
description: "Breadcrumb trails and step sequences for orienting users in docs and agentic workflows."
type: docs
weight: 35
date: 2026-04-09
tags: ["navigation", "components", "reference"]
ai-disclosure: "generated"
ai-model: "claude-sonnet-4-5"
ai-provider: "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.

```html
<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

```html
<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 |

```html
<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

```html
<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.

```html
<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](/docs/data-attributes/) — `data-role`, `data-status`, and the full attribute vocabulary
- [Layouts](/docs/layouts/) — `data-layout` values including `vertical`
- [Components](/docs/components/) — callouts, tasks, and other component patterns