Floating Navbar

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

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

highlight-nav-menu.tsx

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

logo?

React.ReactNode

—

Logo element rendered on the left side of the navbar.

links?

NavLink[]

[]

Navigation links. Each link can optionally have children for a dropdown.

cta?

{ label: string; href: string }

—

Optional CTA button shown on the right. Animates in once the user scrolls past ctaThreshold.

ctaThreshold?

number

80

Scroll distance in pixels before the CTA button appears.

showThemeToggle?

boolean

true

Show a sun/moon theme toggle button. Requires a next-themes provider.

className?

string

—

Additional className for the outer wrapper.

NavLink

label

string

—

Text label for the link.

href

string

—

URL the link navigates to.

children?

{ label: string; href: string; description?: string }[]

—

Optional sub-links rendered in a dropdown panel.

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 Léo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.