Library · Navigation

Nav / Sidebar Section Nav

Sticky vertical section-nav rail with active-section highlighting; collapses to a disclosure on mobile. Anchors work without JS (IntersectionObserver + mobile toggle are progressive). Tone via the shared contract.

Figma: Nav / Sidebar Section Nav ↗
Live preview — edit theme bottom-right 
---
import NavSidebar from "../components/figma/NavSidebar.astro";
---
<NavSidebar
  heading="On this page"
  tone="base-100"
  items={[
    { label: "Introduction", anchor: "s-intro" },
    { label: "The approach", anchor: "s-approach" },
    { label: "What's included", anchor: "s-included" },
    { label: "Timeline", anchor: "s-timeline" },
    { label: "Next steps", anchor: "s-next" },
  ]}
/>
<section id="s-intro" class="demo"><h2>Introduction</h2></section>
<section id="s-approach" class="demo"><h2>The approach</h2></section>
<section id="s-included" class="demo"><h2>What's included</h2></section>
<section id="s-timeline" class="demo"><h2>Timeline</h2></section>
<section id="s-next" class="demo"><h2>Next steps</h2></section>

Props

NameTypeRequiredDescription
items SidebarItem[]; Yes The in-page links
heading string; — Optional heading above the rail
sticky boolean; — Stick the rail to the top on scroll (desktop) (default: true)
ariaLabel string; — Accessible label for the nav landmark (default: 'Section navigation')
tone "base-100" | "base-200" | "base-300" | "primary" | "secondary" | "neutral"; — Background tone — the Figma colour-variant axis

Example with all props

<NavSidebar
  heading="On this page"
  tone="base-100"
  items={[
    { label: "Introduction", anchor: "intro" },
    { label: "The approach", anchor: "approach" },
  ]}
/>