--- title: "Scrollspy Nav — Free Framer component · Best of Framer" description: "Free Framer component · by vivi park · Navigation. Section nav for one-page sites" canonical: "https://framer.elliotli.dev/component/scrollspy-nav" --- [Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Scrollspy Nav # Scrollspy Nav Section nav for one-page sites [View on Framer](https://framer.com/marketplace/components/scrollspy-nav/?via=elliot-li) ![Scrollspy Nav preview image 1](https://framer.elliotli.dev/og/component/scrollspy-nav/83e9bc1166c8be82/1600x1200.jpg) ## Summary Section nav for one-page sites ## Description A section navigation that highlights where you are on the page. This is not a table of contents. It does not read headings out of an article. You name the sections you already have on the canvas, and the matching link lights up as each one reaches the top of the viewport. Setting it up takes a minute. Give each section an ID in Framer's right panel, then list them here as "Label: section-id". Clicking a link scrolls to that section. 13 properties, all on the canvas: Sections · Vertical or horizontal · Marker (line / dot / none) · Smooth scroll · Top offset · Gap · Size · Weight · Tracking · Marker size · Idle · Active · Marker color Top offset accounts for a fixed header, so sections land below it instead of underneath. Built to behave: uses IntersectionObserver, not a scroll listener, so it costs nothing while you scroll. On the canvas the first item shows as active, so the nav never looks broken while you design. Auto width · auto height. Get all four in one place, plus a note when a new one lands: https://bold-wheel-055406.framer.app/pack ## Rank history [How rankings work →](/terms#rankings) - All · #3517 ## Details - **Author**: vivi park - **Published**: 2026-08-09 - **Updated**: 2026-08-25 - **Added**: 2026-08-09 - **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