About Scroll Anchor Dock
Grab more framer components for free
Scroll Section Nav is a minimal floating navigation that keeps your page sections within reach. Connect it to any section using Framer’s Scroll Section ID, and it stays synced with the section currently in view. Click the pill to expand the navigation, then jump smoothly to any section without losing your place.
Features
Floating pill navigation
Active section highlighting
Smooth scroll-to-section navigation
Expandable navigation menu
Framer Scroll Section ID support
Custom section labels and numbering
Adjustable activation point and scroll offset
Fully customizable typography, colors, spacing, radius, shadow, and animations
Responsive and lightweight
Fully Customizable
Designed to adapt to your website rather than force a specific style. Customize the navigation's appearance, behavior, spacing, and animation to match your existing design system.
Customize
Section labels & Scroll Section IDs
Typography
Colors
Border & shadow
Pill and item radius
Padding & spacing
Expanded width
Animation speed
Active-section behavior
Scroll offset
Section activation point
Section numbering
How It Works
Add a Scroll Section ID to each section of your Framer page, then enter the same ID in the component's Items list. As visitors scroll, the pill updates to reflect the corresponding section. Clicking the pill expands the menu, and selecting an item smoothly scrolls the page to its connected section.
Credit to Osmo Supply for the original inspiration behind this component.
