build69
build69  /  Components  /  Navigation  /  AppBarMegaMenu

AppBarMegaMenu

v1.0.14Updated 19 Oct 2026

Catalogue-style top bar where each trigger opens a wide multi-column mega-menu panel (icon + label + description). Built on Radix Menubar. Dark surface.

View source← Back to catalog

Preview

Live · 6 stories
Mega 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
  • Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a)
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.

get_registry_item({ name: "AppBarMegaMenu" })

Usage

import { AppBarMegaMenu } from '@build69/ui';

<AppBarMegaMenu brand={brand} sections={sections} onSearch={openSearch} user={user} />

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
brand

Logo chip + wordmark

AppBarBrand—
sections

Triggers, each opening a wide multi-column panel

AppBarMegaSection[]—
onSearch

Renders a search icon button

() => void—
user

Avatar dropdown menu

AppBarUser—
sticky

Position sticky top-0 z-40 (default true)

boolean—
linkComponent

The host app link component for the brand and every mega-panel row that has an href. MCP feedback fb_bf7dc63a.

AppBarLinkComponent—

Related

Platform docsAll componentsSource files