Floating Navbar

A sticky floating pill navbar with scroll-velocity spring physics, dropdown menus, mobile overlay, and optional theme toggle.

Installation

File Structure

velocity-highlight.tsx

floating-navbar.tsx

Usage

import { FloatingNavbar } from "@/components/unlumen-ui/floating-navbar";

const LINKS = [
  { label: "About", href: "/about" },
  {
    label: "Products",
    href: "#",
    children: [
      {
        label: "Analytics",
        href: "/products/analytics",
        description: "Understand your data.",
      },
      {
        label: "Automation",
        href: "/products/automation",
        description: "Streamline workflows.",
      },
    ],
  },
  { label: "Pricing", href: "/pricing" },
];

<FloatingNavbar
  logo={<img src="/logo.svg" alt="Logo" className="h-6" />}
  links={LINKS}
  cta={{ label: "Get started", href: "/signup" }}
/>;

API Reference

FloatingNavbar

Prop	Type	Default
`logo?`	`React.ReactNode`	-
`links?`	`NavLink[]`	`[]`
`cta?`	`{ label: string; href: string }`	-
`ctaThreshold?`	`number`	`80`
`showThemeToggle?`	`boolean`	`true`
`className?`	`string`	-

NavLink

Prop	Type	Default
`label`	`string`	-
`href`	`string`	-
`children?`	`{ label: string; href: string; description?: string }[]`	-

Notes

Scroll velocity spring: uses useVelocity + useTransform from Motion to nudge the navbar ±12px vertically as you scroll fast — giving it a tactile floating feel without permanently moving it.
CTA animation: the CTA button width animates from 0 to auto using a spring so it slides in smoothly when the scroll threshold is crossed.
Mobile overlay: locks document.body scroll while open and slides out with a CSS animation.
Dropdowns: on desktop, dropdowns open on hover using AnimatePresence with a scale+opacity transition. On mobile, they expand with a height animation.

Credits

Built by Unlumen UI.