React Mega Menu
The navigation pattern of large engineering companies: a light navbar whose items open full-width panels with columned link sections, optional per-link descriptions, and a featured card for announcements. Data-driven — describe your menu as an array and the component renders desktop panels and a mobile accordion from the same structure. Opens on hover or click; closes on Escape, outside click, or mouse leave.
Hover or click Products — panels open full-width below the bar.
Installation
npx shadcn@latest add mega-menu.json
Usage
Loading...
Design notes
- Panels, not popovers — the open panel spans the full navbar width with a hairline border and quiet shadow, the way Siemens- and IBM-class sites present depth of catalog.
- Active item carries a primary underline and a rotated chevron; hover intent and click both work, so the menu behaves on touch devices and with a mouse.
- Featured card — each item can promote one announcement with an eyebrow, description, and arrow CTA.
- One data structure — the mobile accordion renders from the same
itemsarray; nothing to keep in sync.
Props
MegaMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Kelvin UI" | Brand name next to the logo |
| logo | React.ReactNode | — | Logo mark |
| items | MegaMenuItem[] | — | Menu structure (see below) |
| cta | { label, href } | — | Right-side call-to-action button |
| onSearchClick | () => void | — | Handler for the search icon |
MegaMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Nav item label |
| href | string | — | Renders a plain link when no sections are given |
| sections | MegaMenuSection[] | — | Columns of { title, links: { label, href, description? }[] } |
| featured | MegaMenuFeatured | — | Optional card: { eyebrow?, title, description, href, cta? } |