Shadcn Scrollspy

Browse 2 production-ready shadcn scrollspy components for highlighting the active section as users scroll. Covers basic scrollspy with sticky navigation and scrollspy with scroll area : a custom ReUI component using IntersectionObserver for accurate section tracking.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

A table of contents that marks which section of a long scrolling panel is in view
Jump links that scroll their content to the chosen section and keep that link highlighted

When not to use

A bounded panel that only needs its own scrollbar, with no links following the content: use the Scroll Area component
A chat transcript that opens on the newest turn and follows replies as they stream: use the Message Scroller component
Account pages whose side links swap in one panel at a time, hiding the rest: use the Profile blocks

Agent notes

Without targetRef the spy tracks nothing and a click only marks its link without scrolling, so always pass one
targetRef can sit on a wrapper around a ScrollArea: the spy finds its scroll-area-viewport slot and tracks and scrolls that
history is on by default, so mount and every section change rewrite the URL hash with replaceState; pass false to leave it alone

Markdownhttps://web.dev.reui.io/components/scrollspy.md

MCPget_component("scrollspy")

Installnpx shadcn@latest add @reui/scrollspy

Full index for agents:llms.txtReUI MCP setup

Shadcn Scrollspy: Active Section Navigation Highlight

ReUI Scrollspy is a custom shadcn component that highlights the active navigation link as users scroll through page sections. It uses the Intersection Observer API to detect which section is in the viewport and updates the active link state without scroll event listeners or manual offset calculations.

2 components cover basic scrollspy with sticky navigation links and scrollspy inside a shadcn Scroll Area for constrained-height containers. Both components are suitable for documentation sidebars, long-form content pages, and settings panels with section anchors.

The sections below explain the Intersection Observer approach, use cases, features, and composition guidance.

What is Shadcn Scrollspy?

ReUI Scrollspy is a custom component that tracks scroll position relative to named sections on a page and highlights the corresponding navigation link. It uses the browser's native IntersectionObserver API : a more accurate and performance-efficient approach than calculating scroll position with getBoundingClientRect or scroll event listeners.

The sticky navigation component renders a left or right sidebar of section links that stick in the viewport as the user scrolls. The scroll area component embeds the scrollable content inside a shadcn ScrollArea, with navigation links in the same panel : useful for settings pages, doc viewers, and constrained panels.

Why Use Shadcn Scrollspy?

Long-form documentation pages, settings panels with many sections, privacy policies, pricing pages, and onboarding guides all benefit from in-page navigation with visual feedback about which section the user is viewing. Scrollspy removes the cognitive overhead of mapping scroll position to menu items manually.

IntersectionObserver fires when a section enters or exits the viewport : no scroll events that run on every pixel of movement. This makes scrollspy components performant even on pages with many observed sections. Pair with Shadcn Navigation Menu or a custom link list for the navigation side.

Shadcn Scrollspy Features

IntersectionObserver Tracking. Uses the browser's native IntersectionObserver to detect which section is in the viewport. No scroll event listeners, no getBoundingClientRect polling, no performance overhead on scroll.
Active Link Highlighting. The navigation link corresponding to the current visible section receives an active style : bold text, colored border, or background : that updates smoothly as sections enter and exit the viewport.
Sticky Navigation Sidebar. Navigation links use CSS position: sticky to remain visible as the user scrolls the main content. The active highlight updates in real time so users always know their position in the document.
Scroll Area Variant. Scrollspy inside a shadcn ScrollArea confines the scrollable content to a fixed-height panel. Useful for settings pages, doc viewers, and constrained panels in dashboards.
Smooth Scroll on Link Click. Clicking a navigation link smoothly scrolls the page or scroll container to the target section using scrollIntoView({ behavior: 'smooth' }) : matching the UX of well-known documentation sites.
Configurable Threshold and Root Margin. IntersectionObserver threshold and rootMargin are configurable. Adjust rootMargin to trigger the active state earlier or later relative to the viewport edge, matching your layout's sticky header height.

ReUI Scrollspy: In-House Custom Shadcn Component

ReUI Scrollspy is an in-house component built and maintained by the ReUI team as part of the ReUI open-source library. It is designed to integrate seamlessly into any shadcn/ui project : following the same copy-and-own installation model. The component source lands directly in your repository; you own it, extend it, and style it with your Tailwind CSS tokens. ReUI Scrollspy is a custom in-page navigation component not available in base shadcn/ui. It uses the browser's native IntersectionObserver API to track which content section is in the viewport and highlights the corresponding navigation link. No scroll event listeners : only intersection callbacks fire, keeping performance overhead minimal on long pages.

The component is available in two API flavors to match your primitive stack: a Radix UI version for teams using Radix-based shadcn primitives, and a Base UI version for teams on @base-ui/react. Both versions share identical visual output and Tailwind CSS styling : only the underlying headless primitive differs. ReUI maintains 22 such in-house components, all available in both Radix and Base UI versions, each with dedicated documentation covering the full component API, usage examples, and prop references.

Pair Scrollspy with Shadcn Scroll Area for constrained-height scrollable panels where the navigation and content both sit inside a bounded container.

Use Shadcn Navigation Menu or a simple link list for the navigation side. Apply active styles with Tailwind variants : border-l-2 border-primary for a left-rule active indicator that matches documentation site conventions.

Combine Scrollspy with Shadcn Separator between sections and Shadcn Button for 'Back to top' actions at the bottom of long content pages.

Frequently Asked Questions

What is the difference between ReUI Scrollspy and a standard scrollspy library?

ReUI Scrollspy integrates seamlessly with Shadcn Create design tokens and provides optimized performance for many sections. It includes built-in support for offset configuration and smooth scroll behavior.

How do I configure offset for fixed headers?

Pass the offset prop to account for fixed headers. If your header is 80px tall, set offset={80} so scrollspy highlights trigger at the correct scroll position.

How do I use scrollspy with dynamically loaded content?

Scrollspy updates section detection when content changes. Wrap dynamic sections in data-attributes and let scrollspy observe the DOM. Re-initialize if needed after major content updates.

Can I have multiple scrollspy instances on one page?

Yes. Each instance watches a specific container and nav element. Assign unique IDs to containers and nav menus to avoid conflicts between multiple scrollspy components.

How does scrollspy perform with 50+ sections?

Scrollspy uses Intersection Observer for efficient section detection. Performance is excellent even with many sections; consider using pagination or lazy loading for very large documents.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.