Scrollspy Navigation

Scrollspy Navigation

About Scrollspy Navigation

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].