Components

Scrollspy

Dynamically highlights navigation to indicate current visible section in viewport during page scroll

Installation

pnpm dlx shadcn@latest add https://reui.io/r/scrollspy.json

This component provides a scrollspy navigation system that highlights the current section in view and keeps the URL hash in sync.

Prop	Type	Default	Description
`children`	`ReactNode`		The navigation structure and anchor elements.
`targetRef`	`RefObject<HTMLElement \| HTMLDivElement \| Document>`		The scrollable container to observe. Defaults to `document`.
`onUpdate`	`(id: string) => void`		Callback fired when the active section changes. Receives the section id.
`offset`	`number`	`0`	Offset in pixels to account for sticky headers or spacing above sections.
`smooth`	`boolean`	`true`	If true, smooth scrolls to the section when a nav item is clicked.
`className`	`string`		Additional class names for the root div.
`dataAttribute`	`string`	`'scrollspy'`	The data attribute prefix used for anchors and sections.
`history`	`boolean`	`true`	If true, updates the URL hash as the user scrolls or clicks nav items.

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-anchor="section-1"`
`data-scrollspy-offset`	On nav anchor elements (optional)	Custom offset for this anchor (overrides global `offset` prop).
`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.

On This Page