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