---
title: "Scrollbar Indicator — Framer component · Best of Framer"
description: "$10.00 · Framer component · by El-Shaddai Oche · Interactive. Section Tracking & Navigation"
canonical: "https://framer.elliotli.dev/component/scrollbar-indicator"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Scrollbar Indicator

# Scrollbar Indicator

Section Tracking & Navigation

[View on Framer](https://framer.com/marketplace/components/scrollbar-indicator/?via=elliot-li)

![Scrollbar Indicator preview image 1](https://framer.elliotli.dev/og/component/scrollbar-indicator/a07ffb74a89e44ba/1600x1200.jpg)

## Summary

Section Tracking & Navigation

## Description

## Overview

Scroll Progress Nav is a powerful navigation system designed to **enhance how users move through your page**.

[PREVIEW](https://scrollbarindicator.framer.website/)

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](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-fy4e4f0t-axJHA3OPt9Lrj6UrrspXY2jjVIxaGP)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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2320

## Details

- **Author**: El-Shaddai Oche
- **Price**: $10.00
- **Published**: 2026-04-08
- **Updated**: 2026-05-30
- **Added**: 2026-03-23
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step