Shadcn Scrollspy
View docsBrowse 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.
Basic scrollspy
Basic scroll area
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.
Two 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 10+ 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.
Integrating With Other Components
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.