About Scrollbar Indicator
Overview
Scroll Progress Nav is a powerful navigation system designed to enhance how users move through your page.
Instead of static anchors or basic scroll indicators, this component creates a dynamic, responsive navigation experience that updates in real-time as users scroll.
It acts as:
A progress tracker
A section navigator
A visual storytelling guide
Whether used as a sidebar or horizontal tracker, it keeps users oriented, engaged, and in control.
Key Features
Auto Section Detection Automatically highlights the active section as users scroll through the page.
Scroll-Synced Navigation Each step reflects real-time scroll position, giving users a clear sense of progress.
Smooth Scroll Interaction Clicking a step smoothly scrolls to the linked section — clean, controlled, and precise.
Vertical & Horizontal Layouts Switch between sidebar (vertical) and top/bottom bar (horizontal) instantly.
Fully Configurable Sections Map multiple sections with custom IDs and labels.
Tooltip Labels Display contextual labels (e.g. Home, About, Features) on hover or active state.
Advanced Styling Control Customize:
Active / inactive colors
Background color
Dot size & spacing
Line thickness
Border radius
Responsive Variants Built-in support for desktop and mobile with adjustable variants.
Controls
This component gives you deep control without complexity:
Scroll Behavior
Trigger: Section in view
Viewport Position: Control when a section becomes active
Replay: Enable or disable animation replay
Section Mapping: Assign section IDs (01, 02, 03…) to page sections
Visual Customization
Active Text Color
Inactive Text Color
Tooltip Labels (per section)
Tooltip Background & Radius
Spacing & Layout Control
Layout & Direction
Rotation Control (0°) → Switch between vertical and horizontal layouts
Variant Selection → Web / Mobile states
Alignment Options → Flexible placement for different layouts
Interaction Controls
Link Mapping (Link 01, 02, 03…) → Connect each step to its corresponding section
Active State Styling → Highlight current section dynamically
Best Use Cases
Portfolio websites
Agency landing pages
SaaS product pages
Case study pages
Documentation layouts
Storytelling scroll experiences
Pro Tips
Use short section labels for cleaner tooltips, Combine with scroll animations for storytelling pages, Keep contrast high for active states, Use vertical layout for long-form content
Upgrade Your Navigation Experience
Stop using basic anchor links.
Turn your page into a guided, interactive journey with Scroll Progress Nav.