SectionDotNav adds a sleek, fixed dot navigation to the side of your Framer site.
As visitors scroll, the active dot glows, highlighting the current position. This makes it instantly clear for users where they are on the page. Clicking any dot smoothly scrolls to that section.
Built for landing pages, portfolios, and long-form product pages where you want to guide your visitors without cluttering the layout.
- Scroll-aware: Automatically detects which section is in view- Animated state: Active dot scales up and emits a two-layer glow effect- Smooth transitions: Clicking on a section scrolls the users viewport smoothly to that section.- Tooltip: Hover reveals a frosted-glass label for each section (optional)- Canvas preview: Pill aligns to your chosen side/position in the Framer editor so you can see the layout at a glance
- Framer designers building one-page sites, landing pages, or long scrolling portfolios- SaaS and product pages with multiple sections (Hero, Features, Pricing, FAQ, CTA)- Anyone who wants polished micro-navigation without building it from scratch
Layout
- Position: Left or Right side of the viewport- Vertical alignment: Top, Center, or Bottom
Dots
- Dot size (px)- Gap between dots (px)- Inactive color, hover color, active color- Transition style: Spring, Ease, or Bounce
Tooltip
- Toggle on/off- Background color (default: frosted glass)- Text color and font - Corner radius- Border color
1. Drop the component onto your page (Width: 100%, Height: Fill)2. Give each target Section an ID in the Framer sidebar (e.g. `section-hero`, `section-about`)3. Enter those IDs in the "Sections" property control along with a label for users to identify.
That's it. No custom code, no external dependencies.
Tim Akihiro Heinrich
