The Scrollspy Navigation component is a powerful and elegant solution designed to effortlessly guide users through your one-page website, blog, or portfolio. It combines automatic section detection with a beautifully animated indicator and extensive customization options to perfectly match your brand's identity.
Smart Scrollspy & Navigation: Using a performance-optimized IntersectionObserver, the component automatically detects the active section and updates the navigation in real-time as the user scrolls. Clicking an item provides a smooth scroll-to-section experience and is fully compatible with modern scroll libraries like Lenis.
Intelligent Cross-Site Routing: The component seamlessly handles both single-page anchors and multi-page navigation. It automatically detects the link type—internal pages, scroll anchors, or external URLs—and renders the appropriate structure. Internal links leverage Framer’s native routing for instant, flash-free page transitions, while scroll anchors guarantee reliable deep-linking and browser-native scrolling behavior.
Smooth Animated Indicator: A fully customizable indicator provides clear visual feedback by smoothly sliding and scaling to the active item. You have full control over its color, the active text color, and its sizing behavior (Scaling or Fixed Size).
Conditional Visibility: Define exactly where the navigation bar should appear. Set Start and End sections to make it visible only when needed, automatically hiding it in areas like the hero or footer.
Independent Scroll Offsets: Fine-tune the user experience with separate scroll offsets for section activation (the scrollspy trigger) and component visibility (the appear/disappear trigger), giving you precise control.
Flexible Item Configuration:
Add unlimited navigation items, easily linking them to Framer’s native Scroll Sections.
Display items with text and an icon, icon-only, or text-only—perfect for creating compact, mobile-friendly navigation.
Automatic SVG Icon Recoloring: A standout feature that automatically colors your single-color SVG icons to match the Text Color (for default state) and Active Text Color (for the active state). This ensures brand consistency with zero effort and can be toggled off for multi-color images.
Layout Flexibility: Built to fill any frame (100% Width & Height), the component can be easily resized and integrated anywhere in your design. All navigation items remain perfectly centered, ensuring a clean look in any layout.
Advanced Styling & Layout:
Full Font Control: Complete typography settings for the navigation text.
Nav Bar Customization: Control the container’s background, padding, border radius, and apply a detailed drop shadow with a native-like editor (Color, X, Y, Blur, Spread).
Icon Layout: Position icons to the left, right, top, or bottom of the text label to fit any design.
With its deep customization and intelligent functionality, the Scrollspy Navigation is the ultimate tool for creating intuitive and professional navigation on any Framer project.
Refunds: Please note that due to the digital nature of this product, all sales are final. You can review my full Refund & Cancellation Policy [here].
Lennart Ahlfeldt
