Scrollbar Indicator

Section Tracking & Navigation

Overview Scroll Progress Nav is a powerful navigation system designed to enhance how users move through your page . PREVIEW 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 Image guide 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.

Section Tracking & Navigation