Scrollspy
Navigation mechanism that automatically updates active links based on scroll position to indicate which section is currently in the viewport.
Playground
Explore all scrollspy props interactively.
On this page
Introduction
This is the first section. Scroll down to see the active link update automatically.
Architecture
The architecture is fully reactive, observing elements as they enter the viewport.
Deployment
Deploy your site confidently knowing the scroll tracking handles offset margins properly.
Props
The bound active section ID.
Scroll offset in pixels before a section is considered active.
Theme color for active links
Render style of active links
Scrollspy with Glass
When inside a glass container, Scrollspy links automatically inherit the active context and highlight themselves beautifully.
Alpha Section
This section is being tracked. Scroll past it to see the sidebar update.
Beta Section
The observer handles multiple entries and selects the one with the highest intersection ratio.
Gamma Section
Final section. Note how clicking the links smoothly scrolls you here.