A horizontal menu bar with dropdown menus, modeled after desktop application menu bars.
A composable menu bar that renders a horizontal row of dropdown menus. Built on top of Base UI's Menubar and Menu primitives and internally reuses DropdownMenu sub-components for menu content, items, and submenus.
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
} from "@/components/ui/menubar"
export default function MenubarDemo() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New Tab</MenubarItem>
<MenubarItem>New Window</MenubarItem>
<MenubarSeparator />
<MenubarItem>Print</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo</MenubarItem>
<MenubarItem>Redo</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
)
}
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
MenubarLabel,
MenubarShortcut,
MenubarGroup,
MenubarPortal,
MenubarSub,
MenubarSubTrigger,
MenubarSubContent,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
} from "@/components/ui/menubar"<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New Tab</MenubarItem>
<MenubarItem>New Window</MenubarItem>
<MenubarSeparator />
<MenubarItem>Exit</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar><Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New Tab <MenubarShortcut>Ctrl+T</MenubarShortcut>
</MenubarItem>
<MenubarItem>
New Window <MenubarShortcut>Ctrl+N</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>Exit</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo</MenubarItem>
<MenubarItem>Redo</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar><Menubar>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarItem>Zoom In</MenubarItem>
<MenubarItem>Zoom Out</MenubarItem>
<MenubarSeparator />
<MenubarSub>
<MenubarSubTrigger>Layout</MenubarSubTrigger>
<MenubarSubContent>
<MenubarItem>Sidebar</MenubarItem>
<MenubarItem>Panel</MenubarItem>
</MenubarSubContent>
</MenubarSub>
</MenubarContent>
</MenubarMenu>
</Menubar><Menubar>
<MenubarMenu>
<MenubarTrigger>Options</MenubarTrigger>
<MenubarContent>
<MenubarLabel>Appearance</MenubarLabel>
<MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>
<MenubarCheckboxItem>Show Statusbar</MenubarCheckboxItem>
<MenubarSeparator />
<MenubarLabel>Theme</MenubarLabel>
<MenubarRadioGroup value="light">
<MenubarRadioItem value="light">Light</MenubarRadioItem>
<MenubarRadioItem value="dark">Dark</MenubarRadioItem>
<MenubarRadioItem value="system">System</MenubarRadioItem>
</MenubarRadioGroup>
</MenubarContent>
</MenubarMenu>
</Menubar>The root container. Renders a horizontal flex row with border and padding.
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |
Wraps a single menu within the menu bar. Delegates to DropdownMenu.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
The button that opens a menu. Styled as a compact text button that highlights on hover and when expanded.
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |
The dropdown panel that appears when a trigger is activated.
| Prop | Type | Default | Description |
|---|---|---|---|
align | string | "start" | Alignment of the popup relative to the trigger. |
alignOffset | number | -4 | Offset from the aligned edge in pixels. |
sideOffset | number | 8 | Distance from the trigger in pixels. |
className | string | — | |
children | ReactNode | — |
A single actionable item inside a menu.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | — | When true, adds left padding to align with items that have icons. |
variant | "default" | "destructive" | "default" | Visual variant for the item. |
className | string | — | |
children | ReactNode | — |
A menu item with a checkbox indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Whether the item is checked. |
inset | boolean | — | When true, adds left padding for alignment. |
className | string | — | |
children | ReactNode | — |
Groups radio items so only one can be selected at a time.
| Prop | Type | Default |
|---|---|---|
value | string | — |
children | ReactNode | — |
A menu item with a radio indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The value of this radio item. |
inset | boolean | — | When true, adds left padding for alignment. |
className | string | — | |
children | ReactNode | — |
A non-interactive label for grouping items.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | — | When true, adds left padding for alignment. |
className | string | — | |
children | ReactNode | — |
A horizontal line separating groups of items.
| Prop | Type | Default |
|---|---|---|
className | string | — |
Displays a keyboard shortcut hint aligned to the right of a menu item.
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |
Groups related menu items together.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
Renders menu content into a portal.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
Wraps a submenu trigger and content pair.
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
The item that opens a submenu. Renders a chevron to indicate nesting.
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | — | When true, adds left padding for alignment. |
className | string | — | |
children | ReactNode | — |
The dropdown panel for a submenu.
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |