ScrollNav
A sticky top navigation bar that automatically updates its active links based on scroll position, similar to Scrollspy but optimized for horizontal header layouts.
Playground
Explore all scrollnav props interactively.
Introduction
Scroll down to see the active navigation state change.
Pricing
The links above are responsive to the viewport intersection.
FAQ
This is the final section.
Props
The bound active section ID.
Scroll offset in pixels before a section is considered active.
Intersection ratio required to trigger an active state (0.0 to 1.0).
Theme color for active links
Render style of active links
Glass surface density
Backdrop blur intensity
Elevated with shadow
Glass Header Rendering
Applying glass to a ScrollNav turns it into a beautiful frosted navbar that floats above the page content.