Components
Scrollspy
UI Library:
Dynamically highlights navigation to indicate current visible section in viewport during page scroll
Installation
pnpm dlx shadcn@latest add @toui/scrollspy
Examples
Horizontal
API Reference
This component provides a scrollspy navigation system that highlights the current section in view and keeps the URL hash in sync.
Scrollspy Props
| Prop | Type | Default |
|---|---|---|
children | ||
targetRef | ||
onUpdate | ||
offset | ||
smooth | ||
className | ||
dataAttribute | ||
history |
Data Attributes
| Data Attribute | Usage | Description |
|---|---|---|
data-slot="scrollspy" | On the root wrapper | Identifies the main Scrollspy container. |
data-scrollspy-anchor | On nav anchor elements | The section id this anchor targets. Example: |
data-scrollspy-offset | On nav anchor elements (optional) | Custom offset for this anchor (overrides global |
data-scrollspy | On the nav group (optional) | Used for grouping anchors, e.g. for styling or nested scrollspy. |
data-active | On anchor elements | Applied to the currently active anchor. |