---
title: "Scroll Spy Nav — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Minjoo Kim · Navigation. Auto-highlighting nav with smooth center"
canonical: "https://framer.elliotli.dev/component/scroll-spy-nav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scroll Spy Nav

# Scroll Spy Nav

Auto-highlighting nav with smooth center

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

![Scroll Spy Nav preview image 1](https://framer.elliotli.dev/og/component/scroll-spy-nav/c53d27eeeefc2215/1600x1200.jpg)

## Summary

Auto-highlighting nav with smooth center

## Description

### Scroll Tracker is the ultimate solution for long-page navigation in Framer. It allows you to create highly interactive Tables of Contents, Sidebar Menus, or Progress Steps without writing a single line of code.

## ✨ Key Features

\* **Auto-Detect Active Section:** The component "spies" on the user's scroll position and automatically highlights the current menu item.

\* **Smart Centering:** Unlike standard anchor links that jump to the top, this component smooth-scrolls the target section to the **exact center** of the viewport.

\* **Responsive Layouts:** Supports both **Vertical** (Sidebar) and **Horizontal** (Top bar) layouts with flexible alignment options.

## 🎨 Fully Customizable

Every aspect of the design is under your control:

\* **Typography Mastery:** Set distinct Font Styles for **Normal** and **Active** states. (e.g., switch from _Inter Regular_ to _Inter Bold_ seamlessly).

\* **Layout & Direction:**

\* **Vertical / Horizontal:** Switch instantly between sidebar and top-bar modes.

\* **Text Position (Standard/Reverse):** Easily create **Right-side** navigation by reversing the text and dot order.

\* **Alignment:** Start, Center, End, or Space Between.

\* **Visual Styling:**

\* **Colors:** Customize Active, Inactive, and Line colors.

\* **Sizes:** Adjust Dot Size, Line Width, and Gaps.

## 🚀 How to Use

## 1\. Add Scroll Section IDs to the frames you want to link to on your page.

2\. Drag this component onto your canvas.

3\. In the properties panel, add items and match the **Target ID** to your section IDs.

4\. Set \`Position: Sticky\` to keep it visible while scrolling.

\---

Stop struggling with complex interactions. Upgrade your navigation experience today!

[Refund Policy](https://resourceful-notes-274989.framer.app)

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

-   All · #3696

## Details

- **Author**: Minjoo Kim
- **Price**: $6.00
- **Published**: 2026-02-27
- **Updated**: 2026-02-27
- **Added**: 2026-02-09
- **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