React Visual Mega Menu
A mega-menu navbar whose panels are visual. Each top-level item opens a full-width dropdown styled like a resource section: an "In this section" side-nav column beside a grid of vibrant image cards — each an image, a linked title with an arrow, and a short description. Opens on hover or click; closes on Escape, outside click, or mouse leave. On mobile it collapses to an accordion with compact thumbnail rows.
For the text-and-columns variant, see the Mega Menu. For the same visual layout as a standalone page section, see Insights Section.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| brand | string | Brand text beside the logo |
| logo | ReactNode | Optional logo node |
| items | VisualMegaItem[] | Top-level items; those with cards open a panel |
| cta | { label, href } | Optional primary button |
Each VisualMegaItem is { label, href?, navTitle?, nav?, cards? }. Items with a cards array open a visual panel; plain items with just href render as links. Each card is { image?, title, href?, description? } — the image slot takes any node, so pass an <img> with your own vibrant artwork.