Vigilio Desto
da1d02ccd1
- 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
105 lines
3.2 KiB
Markdown
105 lines
3.2 KiB
Markdown
---
|
|
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
|