Mega Navbar

Blocks & Slices

A sticky, translucent top bar with an Apple-style mega-menu: hovering or keyboard-focusing a top item springs open a rich dropdown of link columns while a shared background pill glides between active items via a Motion layout animation. Collapses to a hamburger disclosure with an accordion on mobile; under prefers-reduced-motion the pill snaps instead of gliding and the sheet opens/closes instantly.

Inspired by Skiper UI — Apple Navbar V002 (pattern) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/mega-navbar.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/mega-navbar.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full overflow-hidden rounded-xl bg-[#0f0f10] ring-1 ring-white/10">
    <MegaNavbar
      brand={
        <span className="inline-flex items-center gap-1.5 text-white">
          <span className="grid size-5 place-items-center rounded-md bg-gradient-to-br from-violet-500 to-fuchsia-500">
            <Sparkles className="size-3 text-white" />
          </span>
          Parable
        </span>
      }
      items={[
        {
          label: "Product",
          panel: [
            {
              title: "Build",
              links: [
                { label: "Components", desc: "60+ animated primitives", icon: <Layers />, href: "#" },
                { label: "Templates", desc: "Ship in minutes", icon: <Rocket />, href: "#" },
              ],
            },
            {
              title: "Learn",
              links: [
                { label: "Docs", desc: "Guides & full API", icon: <BookOpen />, href: "#" },
                { label: "Support", desc: "We're here to help", icon: <LifeBuoy />, href: "#" },
              ],
            },
          ],
        },
        { label: "Pricing", href: "#" },
        { label: "Docs", href: "#" },
      ]}
    />
    <div className="space-y-3 p-6">
      <div className="h-2.5 w-2/3 rounded-full bg-white/10" />
      <div className="h-2.5 w-1/2 rounded-full bg-white/[0.06]" />
      <div className="h-24 rounded-xl bg-gradient-to-br from-violet-500/15 via-fuchsia-500/10 to-transparent ring-1 ring-white/5" />
    </div>
  </div>

Props

MegaNavbarProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">

Prop	Type	Default	Description
brand	React.ReactNode	—	Brand mark shown at the leading edge — a logo node or text.
items*	MegaNavItem[]	—	Top-level items. Items with a `panel` open a mega-menu; others are links.
accent	string	"#8b5cf6"	Accent for the gliding pill, focus rings and hover glow. Mirrors `--pb-violet`.
background	string	"#0f0f10"	Bar surface colour, rendered translucent over a blur. Mirrors `--pb-ink`.

npm dependencies

motion
lucide-react