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.
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.
This component gives you deep control without complexity:
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
Active Text Color
Inactive Text Color
Tooltip Labels (per section)
Tooltip Background & Radius
Spacing & Layout Control
Rotation Control (0°) → Switch between vertical and horizontal layouts
Variant Selection → Web / Mobile states
Alignment Options → Flexible placement for different layouts
Link Mapping (Link 01, 02, 03…) → Connect each step to its corresponding section
Active State Styling → Highlight current section dynamically
Portfolio websites
Agency landing pages
SaaS product pages
Case study pages
Documentation layouts
Storytelling scroll experiences
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
Stop using basic anchor links.
Turn your page into a guided, interactive journey with Scroll Progress Nav.
El-Shaddai Oche
