About Sticky Dot Navbar

Section Dov Navigation Bar with Liquid Glass

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.

Key Features

- 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

Who is this for?

- 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

Preview of the Section Dot Navbar in the Framer Canvas

What's customizable?

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

Preview of the Section Dot Navbar in the Framer Canvas, focus on property controls.

How to set up?

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.