Library

Floating Navbar

Floating Navbar

Glassmorphism navbar that appears when scrolling up and hides when scrolling down. Pill-shaped with animated hover indicator that follows the active item.

navbarfloatingglassmorphismscroll

Installation

bash
# Copy floating-navbar.tsx to your project
cp components/ui/floating-navbar.tsx your-project/components/ui/floating-navbar.tsx

How to use

tsx
import { FloatingNavbar } from "@/components/ui/floating-navbar";
tsx
<FloatingNavbar
  logo={<span className="font-bold">Logo</span>}
  items={[
    { label: "Home", href: "#" },
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "About", href: "#about" },
  ]}
  ctaButton={<button className="px-4 py-1.5 bg-zinc-900 text-white text-sm rounded-full">Sign up</button>}
/>

Dependencies

framer-motion

Exports

FloatingNavbar

File

components/ui/floating-navbar.tsx
Preview

Hover over the nav items to see the animated pill indicator

Acme
HomeFeaturesPricingAbout

In production, this navbar uses position: fixed and auto-hides/shows on scroll direction.

Made with