Library · Navigation

Nav / In-Page Anchor Bar

Sticky in-page anchor bar that scroll-jumps to on-page sections, with an active-section highlight. Anchors work with no JS; scrollspy + smooth-scroll are progressive (IntersectionObserver, reduced-motion aware). Tone via the shared contract.

Figma: Nav / In-Page Anchor Bar ↗

Live preview — edit theme bottom-right

---
import NavAnchorBar from "../components/figma/NavAnchorBar.astro";
---
<NavAnchorBar
  tone="base-100"
  offset={0}
  links={[
    { label: "Overview", anchor: "overview" },
    { label: "Features", anchor: "features" },
    { label: "Location", anchor: "location" },
    { label: "Pricing", anchor: "pricing" },
    { label: "Enquire", anchor: "enquire" },
  ]}
/>
<section id="overview" class="demo-section"><h2>Overview</h2><p>Scroll to see the active link track the section in view.</p></section>
<section id="features" class="demo-section"><h2>Features</h2></section>
<section id="location" class="demo-section"><h2>Location</h2></section>
<section id="pricing" class="demo-section"><h2>Pricing</h2></section>
<section id="enquire" class="demo-section"><h2>Enquire</h2></section>

Props

Name	Type	Required	Description
`links`	`AnchorLink[];`	Yes	The in-page links
`sticky`	`boolean;`	—	Stick to the top of the viewport on scroll (default: true)
`ariaLabel`	`string;`	—	Accessible label for the nav landmark (default: 'On this page')
`offset`	`number;`	—	Offset in px applied above the target when jumping (accounts for a fixed site header) (default: 0)
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<NavAnchorBar
  tone="base-100"
  offset={0}
  links={[
    { label: "Overview", anchor: "overview" },
    { label: "Location", anchor: "location" },
    { label: "Enquire", anchor: "enquire" },
  ]}
/>