Scroll Anchor Dock

Floating Section Navigation

Live Preview 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.

Floating Section Navigation