Ludo
910b0e42a6
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>
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
|