---
title: "Scroll Anchor Dock — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Navigation. Floating Section Navigation"
canonical: "https://framer.elliotli.dev/component/scroll-anchor-dock"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scroll Anchor Dock

# Scroll Anchor Dock

Floating Section Navigation

[View on Framer](https://framer.com/marketplace/components/scroll-anchor-dock/?via=elliot-li)

![Scroll Anchor Dock preview image 1](https://framer.elliotli.dev/og/component/scroll-anchor-dock/f8c88aa9fec04110/1600x1200.jpg)

## Summary

Floating Section Navigation

## Description

[Live Preview](https://scrollanchornav.framer.website/)

[Grab more framer components for free](https://www.framer.com/@design-by-saqlain/)

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](https://www.osmo.supply/) for the original inspiration behind this component.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3377

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-08-17
- **Updated**: 2026-11-04
- **Added**: 2026-08-17
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation