---
title: "Floating Navbar Pro — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Tamás Péter · Navigation. Glass pill nav, scroll-reactive, no code"
canonical: "https://framer.elliotli.dev/component/floating-navbar-pro"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Floating Navbar Pro

# Floating Navbar Pro

Glass pill nav, scroll-reactive, no code

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

![Floating Navbar Pro preview image 1](https://framer.elliotli.dev/og/component/floating-navbar-pro/856d29574798241b/1600x1200.jpg)

## Summary

Glass pill nav, scroll-reactive, no code

## Description

What's included:

-   Frosted glass pill — rgba background, blur intensity (0–60px), border color and width, shadow depth, all panel-controlled
    
-   Scroll-triggered entrance — navbar hides at the top and appears after a configurable scroll distance (0–600px); or set to always visible
    
-   Entrance animation — fade + slide-up with adjustable delay (0–3000ms) and duration (100–2000ms)
    
-   Elastic link indicator — underline slides between nav links and stretches toward the cursor; height, width (% of link), roundness, gap, and stretch amount all adjustable
    
-   Spring jump animation — indicator snaps with a cubic-bezier spring when switching between links
    
-   Magnetic CTA button — follows the cursor within a proximity zone; pull strength adjustable from 1 to 20px
    
-   Scroll progress ring — circular arc fills as the user scrolls the page; stroke width, arc color, track color, and diameter adjustable
    
-   Percentage counter — live scroll % displayed inside the ring, independently toggleable from the ring itself
    
-   Scroll opacity boost — pill background alpha increases progressively over a defined scroll distance (50–1500px), with a max boost value of 0–80
    
-   Logo: text or image — toggle between a bold text logo and an uploaded PNG or SVG; image height scales with font size
    
-   Navigation links — add, remove, and reorder links from the property panel; each item has a label and URL field
    
-   CTA button — optional; independent default and hover states for background, text color, and border color; corner radius and border width adjustable
    
-   Responsive breakpoint — nav links collapse to a hamburger icon below a custom width (default 580px)
    
-   Animated hamburger icon — three bars animate into an X on open; bar width, thickness, and spacing adjustable
    
-   Mobile dropdown — animated slide-in panel; alignment (left/center/right), fixed or pill-matched width, corner radius, item padding (horizontal and vertical), text alignment, and optional dividers between items
    
-   CTA button appears inside the mobile dropdown when enabled
    
-   Typography — font family (any Google Font loaded on the page), size (10–22px), weight (300–800), letter spacing
    
-   Pill layout — max width, corner radius, horizontal padding, vertical padding, alignment (left/center/right), and link gap all adjustable
    

Drop it into any Framer project, pin the frame to Fixed / Top / Center Horizontal, and configure everything from the right panel — no code required.

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

-   All · #1469

## Details

- **Author**: Tamás Péter
- **Price**: $15.00
- **Published**: 2026-05-30
- **Updated**: 2026-06-05
- **Added**: 2026-05-20
- **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