---
title: "Sticky Dot Navbar — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Tim Akihiro Heinrich – Zukunftsberatung. · Navigation. Sleek, Liquid Glass Dot Navigation"
canonical: "https://framer.elliotli.dev/component/sticky-dot-navbar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Sticky Dot Navbar

# Sticky Dot Navbar

Sleek, Liquid Glass Dot Navigation

[View on Framer](https://framer.com/marketplace/components/sticky-dot-navbar/?via=elliot-li)

![Sticky Dot Navbar preview image 1](https://framer.elliotli.dev/og/component/sticky-dot-navbar/6616a04fdf1b384d/1600x1200.jpg)

## Summary

Sleek, Liquid Glass Dot Navigation

## Description

## 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](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8yxk5930-hQ8BlrgIkxMnUzNx14p4fNHzudDZQZ)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.](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8yxk5930-ULJZKHlAQNgYAOiABtSN2FlFmswBvG)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.

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

-   All · #869

## Details

- **Author**: Tim Akihiro Heinrich – Zukunftsberatung.
- **Price**: $5.00
- **Published**: 2026-04-14
- **Updated**: 2026-04-14
- **Added**: 2026-04-03
- **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