trentuna/asw
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
asw/site/content/docs/components/navigation.md
Ludo dd810f5a63
feat: auto-generated docs sidebar, Decap CMS, content migration infra 
Docs restructure:
- Move flat docs into section subdirs (getting-started/, core/,
  components/, reference/) with _index.md for each
- Sidebar auto-generates from content structure — no manual menu entries
- New doc pages appear automatically when created in a section

Decap CMS:
- admin/index.html + config.yml for browser-based editing
- Local mode (npx decap-server) — no OAuth needed
- Collections for all content types: docs, articles, essays, notes, pages

Hugo head.html updated for new CSS layer filenames.
decap-server added as devDependency.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 18:02:34 +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