AppBarMegaMenu
v1.0.7Updated 27 Aug 2026Catalogue-style top bar where each trigger opens a wide multi-column mega-menu panel (icon + label + description). Built on Radix Menubar. Dark surface.
Preview
Live · 6 storiesMega menuOpen ↗
▸Why this is recommendedheaderappbartopbarmegamenu+6
AppBarMegaMenu — mega menu.
Recommended for+14
- ✓Marketing/catalogue navs with grouped link panels
- ✓Products with many destinations organized into columns
- ✓Headers needing wide dropdown panels with descriptions
Tags+6
headerappbartopbarmegamenumega-menushellnavigationcataloguemegamenu
Features+4
- Wide multi-column mega-menu panels (icon + label + description)
- Radix Menubar keyboard nav between triggers, active underline
- Dark bg-sidebar surface with search + avatar right cluster
- Data-driven, SSR-safe, keyboard-accessible, className + data-slot passthrough
Not recommended for−2
- ✕Simple section navs (use AppBarTabs)
- ✕Primary vertical navigation (use Sidebar)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
brandLogo chip + wordmark
—sectionsTriggers, each opening a wide multi-column panel
—onSearchRenders a search icon button
—userAvatar dropdown menu
—stickyPosition sticky top-0 z-40 (default true)
—