---
title: "ScrollSpy Navbar Pro — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Ricky R · Navigation. Smart Section Navigation"
canonical: "https://framer.elliotli.dev/component/scrollspy-navbar-pro"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/ScrollSpy Navbar Pro

# ScrollSpy Navbar Pro

Smart Section Navigation

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

![ScrollSpy Navbar Pro preview image 1](https://framer.elliotli.dev/og/component/scrollspy-navbar-pro/0d55de67929b74d6/1600x900.jpg)

## Summary

Smart Section Navigation

## Description

A floating pill navbar that highlights the section currently in view. It combines smooth scrolling, an animated active pill, glass styling, and full sidebar customization with section and page-link items in one navbar.

Built for real sites, its scrollspy supports smooth-scroll libraries and custom scroll containers. It also includes keyboard focus states, reduced-motion support, aria-current, and responsive behavior across desktop, tablet, and scrollable mobile layouts.

**HIGHLIGHTS:** Animated sliding pill, smooth scroll, and robust scrollspy • Section links and page links in one navbar • Sidebar controls for colors, glass, shadow, spacing, type, and behavior • 5 included style presets • Accessible focus states and reduced-motion support • Fixed or in-frame positioning

**SETUP**

1.  Add the component to your page.
    
2.  Give each Framer section an ID, such as home, about, or projects.
    
3.  In Nav Items, add a matching Label and Section ID. IDs are case-sensitive and should not include #.
    
4.  For another page, change the item Type to Page and select its destination.
    
5.  Preview or publish to test scrolling and navigation; the canvas displays a static preview.
    

**CUSTOMIZATION**

Adjust background, pill, border, text states, glass blur, shadow, radius, padding, gap, top offset, typography, animation, position, and z-index directly from Framer’s sidebar.

**QUICK FIXES**

• Pill not moving: confirm that every Section ID exactly matches its frame ID. • Wrong scroll position: increase Top Offset. • Hidden navbar: raise Z-Index. • Glass not visible: lower the Background color’s opacity. • Final section not activating: give short sections a minimum height of about 60vh. • Link back to a homepage section with an anchor path such as /#projects.

Setup takes about two minutes: add IDs, match them in the sidebar, and publish.

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

-   All · #1763

## Details

- **Author**: Ricky R
- **Price**: $9.00
- **Published**: 2026-07-25
- **Updated**: 2026-08-14
- **Added**: 2026-07-25
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation