Mega Menu
A Vercel-style navigation menu with a direction-aware highlight and a panel that springs and height-morphs between triggers.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/mega-menu.json"Usage
tsx
import { MegaMenu } from "@/components/godui/mega-menu";tsx
const items = [
{
label: "Product",
sections: [
{
heading: "Build",
links: [{ label: "Editor", href: "/editor", description: "Write code" }],
},
],
},
{ label: "Pricing", href: "/pricing" },
];
<MegaMenu items={items} onNavigate={router.push} />;Items with sections open a panel on hover; items with only href render as plain links.
Hovering between triggers slides a shared highlight and morphs the panel height.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | MegaMenuItem[] | — | Triggers: { label, href?, sections? } |
openDelay | number | 80 | Delay (ms) before opening on hover |
closeDelay | number | 140 | Delay (ms) before closing after leaving |
onNavigate | (href: string) => void | — | Called on link click (prevents default) |