Floating Navbar Pro: Premium Navigation Component by Thomas Peter

A frosted-glass floating navbar with scroll-triggered entrance, elastic link indicator, magnetic CTA button, and live scroll progress ring. Fully responsive with an animated hamburger menu. Every detail — colors, blur, typography — controlled from the panel.

About this Component

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