Waiting for action
Open a sub-component to view its docs and settings.
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Unified app-style top navigation with normal dropdowns and a single MegaMenu item.
Pass a single menus array to define the full bar in order. Each entry is one top-level label (App, File, Edit, …):
| Field | Dropdown (type: "dropdown") | Mega panel (type: "mega") |
|---|---|---|
id | Menu id for activeMenu | Menu id for activeMenu |
label | Bar trigger text | Bar trigger text |
items | Flat dropdown rows | — |
sections | — | Grouped mega menu columns |
featured | — | Optional promotional sidebar |
Use activeMenu + onActiveMenuChange for controlled open state.
Handle link clicks with onSelect on TopNavigation for one shared handler, or onSelect on individual dropdown items / mega menu rows for per-link callbacks.
| Prop | Type | Default | Description |
|---|---|---|---|
menus | TopNavigationBarMenu[] | default bar | Defines the full top navigation in order. |
activeMenu | string | null | null | Controlled active top menu id. |
density | SurfaceDensity | "comfortable" | Spacing scale. |
showShortcuts | boolean | true | Show keyboard shortcuts on dropdown items. |
closeOnOutside | boolean | true | Close menus on outside click. |
closeOnEscape | boolean | true | Close menus on Escape. |
closeOnSelect | boolean | true | Close menus after a link is selected. |
onActiveMenuChange | (menuId) => void | — | Called when the open menu changes. |
onSelect | (menuId, item) => void | — | Called when a dropdown or mega menu link is selected. |
children | ReactNode | — | Optional custom bar composition instead of menus. |
nav landmark.