Navbar

A full-width fixed header with velocity-highlight hover, an expanding inline dropdown that grows the navbar height, scroll hide/show, and a mobile circle-reveal overlay.

Installation

File Structure

velocity-highlight.tsx

navbar.tsx

Usage

import { Navbar } from "@/components/unlumen-ui/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" },
];

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

API Reference

Navbar

logo?

React.ReactNode

—

Logo element rendered on the left side of the navbar.

links?

NavLink[]

[]

Navigation links. Links with `children` trigger the expanding inline dropdown.

cta?

{ label: string; href: string }

—

Optional primary CTA button shown on the right (desktop only).

showThemeToggle?

boolean

true

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

className?

string

—

Additional className for the outer motion wrapper.

NavLink

label

string

—

Text label for the link.

href

string

—

URL the link navigates to.

children?

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

—

Sub-links. When present, hovering the link expands the navbar body to reveal a grid of sub-links with staggered entry.

Notes

Velocity highlight: nav links are wrapped in <Highlight mode="parent" hover> so a spring-animated background glides between items as you hover.
Expanding dropdown: instead of a floating panel, hovering a link with children expands the navbar's own height via an AnimatePresence-driven motion.div that goes from height: 0 to height: auto. Sub-links stagger in with a delay.
Scroll hide/show: the navbar slides off-screen when scrolling down more than 5px past the 80px threshold and slides back on scroll-up — using a simple useRef delta rather than a spring, keeping it crisp.
Mobile overlay: a fullscreen circle-reveal animates from the top-right corner using clip-path: circle(...). Links appear with a left-slide stagger and are numbered with monospace counters.

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.