Search for a command to run...
Desktop-style horizontal menu bar (File, Edit, View…). Triggers share the `control.ghost` hover treatment; opened menus reuse the glass surface and item chrome from `DropdownMenu`. Use sparingly — most product surfaces are better served by a single `DropdownMenu` of actions.
Each top-level menu is a <MenubarMenu> wrapping a <MenubarTrigger> (the visible row chip) and <MenubarContent> (the dropdown that opens). Hovering one trigger after another swaps the open menu — Radix handles the "hot path" so moving the pointer across the bar transitions between menus without clicking again.
MenubarThe horizontal trigger row. Renders as inline-flex h-9 gap-0.5 — a tight row of chips. Forwards every Radix Menubar.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Override the gap or stretch the bar (w-full for full-width row). |
MenubarMenuPure semantic wrapper (no styling) — one per top-level menu.
MenubarTriggerA single bar chip. h-8 rounded-xl px-3 text-sm with control.ghost-style hover.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Project the behavior onto your own element (rare — usually just text label). |
MenubarContentThe opened menu. Same glass-overlay panel as DropdownMenuContent. Defaults to align="start" with alignOffset={-4} and sideOffset={8} so the menu nests cleanly below its trigger.
MenubarItem / CheckboxItem / RadioItem / Label / Separator / Shortcut / Sub-familySame components, same props, same chrome as the DropdownMenu equivalents — they consume the shared menu-styles module. Destructive variant, brand-tinted check, edge-to-edge separator, and mono-font shortcuts all carry over.
Reserve Menubar for document-editor / IDE-like surfaces where the user moves between many global commands (File / Edit / View / Format). The horizontal bar gives a known location power users can scan instinctively.
Pair menu items with <MenubarShortcut>⌘ K</MenubarShortcut> for any command that has a
keyboard accelerator. The mono-font column lets users learn the shortcut visually.
Group related items with MenubarLabel + MenubarSeparator once a menu grows past ~6 rows.
Same pattern as DropdownMenu — labels read as cluster names, separators break sections.
Use Menubar as a navigation tab strip. Tabs is the right primitive for switching peer views —
Menubar's open-on-hover semantics and dropdown chrome read as "tools," not "views."
Stack 6+ top-level menus. Past that the bar gets dense and the user can't keep the mental map of which menu holds which command — split into separate surfaces or rethink the IA.
Reach for Menubar when a single DropdownMenu of actions would do. The bar's horizontal real
estate cost only pays off when you have at least three meaningful menus.