---
title: "Scrollspy Navigation — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Lennart Ahlfeldt · Navigation. The Scrollspy Navigation component delivers precise section tracking, fluid indicator animations, and complete styling freedom…"
canonical: "https://framer.elliotli.dev/component/scrollspy-navigation"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scrollspy Navigation

# Scrollspy Navigation

Smart Onepager & Crosssite Nav

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

![Scrollspy Navigation preview image 1](https://framer.elliotli.dev/og/component/scrollspy-navigation/3f96b9aee10e3b89/1600x1200.jpg)

## Summary

The Scrollspy Navigation component delivers precise section tracking, fluid indicator animations, and complete styling freedom for Framer single-page and multi-page layouts.

## Description

The Scrollspy Navigation component delivers precise section tracking, fluid indicator animations, and complete styling freedom for Framer single-page and multi-page layouts.

### Key Features

-   **Smart Scrollspy:** Powered by `IntersectionObserver` for zero-lag section detection. Smooth-scrolls on click and works seamlessly with libraries like Lenis.
    
-   **Cross-Site Routing:** Automatically handles internal pages, scroll anchors, and external URLs. Leverages Framer's native routing for flash-free page transitions.
    
-   **Animated Indicator:** Features a customizable active indicator with smooth sliding and scaling. Full control over background, active text color, and scaling behavior.
    
-   **Conditional Visibility:** Define explicit Start and End sections to automatically show or hide the navigation (e.g., hide in hero or footer).
    
-   **Independent Offsets:** Separate trigger offsets for active section detection vs. component visibility for precise scroll control.
    
-   **Flexible Item Layout:** Unlimited items. Display as text + icon, icon-only, or text-only. Position icons top, bottom, left, or right.
    
-   **Automatic SVG Recoloring:** Automatically syncs single-color SVG icons with your active and default text colors. Togglable for multi-color assets.
    
-   **Advanced Styling:** Full typography control, container layout settings (padding, border radius, native drop shadows), and flexible 100% width/height frame fitting.
    

### Refund Policy

Due to the digital nature of this product, all sales are final. Please review the full Refund & Cancellation Policy before purchasing. You can find it [\[here\]](https://lennartworks.de/legal/refund-policy).

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

-   All · #6273

## Details

- **Author**: Lennart Ahlfeldt
- **Price**: $4.00
- **Published**: 2025-10-11
- **Updated**: 2026-07-27
- **Added**: 2025-10-03
- **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