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.