Navigation
ScrollSpy
A list of in-page anchor links that highlights the section currently in view.
<UiScrollSpy :links="..." />Options
One block per prop — what it does, and what it looks like set.
Links
requiredlinks is the list, each entry pointing at an element with a matching id. A depth on an entry sets its indent, so a nested heading reads as one. Scroll the box below and watch the active link track by itself.
Introduction
Placeholder content for "Introduction" — scroll to see the matching link on the left highlight automatically.
Installation
Placeholder content for "Installation" — scroll to see the matching link on the left highlight automatically.
Usage
Placeholder content for "Usage" — scroll to see the matching link on the left highlight automatically.
Basic usage
Placeholder content for "Basic usage" — scroll to see the matching link on the left highlight automatically.
Advanced usage
Placeholder content for "Advanced usage" — scroll to see the matching link on the left highlight automatically.
FAQ
Placeholder content for "FAQ" — scroll to see the matching link on the left highlight automatically.
Title
title is a heading above the list. Leave it off where the surrounding column already says what the list is.
Title icon
titleIcon sits before the title and defaults to bulletList. Swap it for another icon, or pass an empty string for a text-only heading.
Color
color is the active link's color, and the indicator bar beside it.
Which link is active is still resolved by CSS scroll-target-group/:target-current (Chromium 133+), not scroll-spy math — a scroll/resize listener only checks that browser-computed state on each tick so the indicator bar can animate to the new position; on unsupported browsers the links still work, just without the active-state color or bar.
The sliding indicator bar's color comes from color via a bg-* class, separate from the text-* class applied to the active link's text — keep custom color values in sync with any theme overrides so the two don't drift apart.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
linksrequiredScrollSpyLink[]string'bulletList'"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'Types
interface ScrollSpyLink {
id: string;
text: string;
depth: number;
}