Floating Navbar Pro

Glass pill nav, scroll-reactive, no code

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.

Glass pill nav, scroll-reactive, no code