5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Teb4,

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

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.

5a:[["$","$L5d",null,{"post":{"id":"019d6c16-bb0b-732d-88e9-02578442f15e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3f4f4524-5bf3-4425-b284-e56f06f4b953","name":"El-Shaddai Oche","slug":"el-shaddai-oche","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3f4f4524-5bf3-4425-b284-e56f06f4b953/ahx2l4sv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bkN8yp31yEVh9124UY8M","resolved":true,"title":"Scrollbar Indicator","body":"$5e","bodyJson":null,"introduction":"Section Tracking & Navigation","slug":"scrollbar-indicator","author":{"framerUserId":"3f4f4524-5bf3-4425-b284-e56f06f4b953","name":"El-Shaddai Oche","slug":"el-shaddai-oche","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3f4f4524-5bf3-4425-b284-e56f06f4b953/ahx2l4sv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/bkN8yp31yEVh9124UY8M/scrollbar-indicator-G7iRnuUvA9pMJMqgpOvLVq2nvzAGPm","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-23T14:13:02.832Z","updatedAt":"2026-05-30T08:45:47.645Z","publishedAt":"2026-04-08T07:55:22.251Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollbarindicator.framer.website/","price":"10","paymentUrl":"https://contra.com/payment-link/wlE3bA0z-scroll-progress-nav-section-tracking-and-navigation","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"uH4ZbJuaHiT6EC2xsde9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-08T07:55:22.251Z","updatedAt":"2026-04-08T07:55:22.251Z","reported":false}}],"$L5f"]

Suggested for you