Menubar
A Menubar allows users to reach the commands of an editor from menus in a bar that stays on screen.
When to Use
- for the commands of an editor, grouped under names such as “File”, “Edit”, and “View”
- when commands have shortcuts, settings, and submenus that don’t fit in a row of Buttons
When Not to Use
- for one menu (use a Dropdown Menu)
- to move between the pages of a site, as its items are commands with the role
menuitemand not links (use a Navigation Menu) - to move between the sections of an app (use a Sidebar)
See Dropdown Menu for a comparison of the four menus.
Anatomy
| Element | Usage |
|---|---|
| Menu name | Required |
| Bar | Required |
| Check | On a checked item |
| Popup | Required |
| Group label | Optional |
A menu in the bar is a Dropdown Menu under the Menubar prefix: MenubarMenu is its root, and MenubarTrigger is its name in the bar.
Differences From a Dropdown Menu
| Subject | Dropdown Menu | Menubar |
|---|---|---|
| The check of a checkbox or a radio item | At the end of the item | At the start |
| The default width | The width of the trigger, at least 128px | 144px |
ArrowUp on the trigger | Opens the menu at its last item | Does nothing |
If a menu has checkbox or radio items, set inset on its labels and plain items so that all of its text starts at the same edge.
Behavior
By default, while a menu is open, Base UI locks the page’s scroll and prevents clicks from reaching the page. If you want the page to stay interactive, set modal={false} on Menubar.
The bar is as tall as a default control. It is a flex row, so it fills the width of a block container. To end the bar at its last name, add w-fit.
A menu is 144px wide until you set a width on MenubarContent, and long items will wrap.
Accessibility
The bar is one stop in the tab order, and Base UI’s Menubar moves focus between its names with the arrow keys. Inside a menu, the roles and the keys are the same as in a Dropdown Menu.
Keyboard
| Key | Result |
|---|---|
Tab | Moves focus to a name in the bar. When pressed again, moves focus out of the bar. |
ArrowRight, ArrowLeft | Moves focus to the next or the previous name. From the last name, focus moves to the first. |
Home, End | Moves focus to the first or the last name |
Enter, Space, or ArrowDown on a name | Opens its menu. Focus moves to the first item. |
ArrowRight, ArrowLeft in a menu | Opens the next or the previous menu. On a submenu trigger, ArrowRight opens the submenu. |
Escape | Closes the menu. Focus returns to its name. |
Installation
npx shadcn@latest add @summit/menubarThe CLI also adds @summit/dropdown-menu.
Usage
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarShortcut,
MenubarTrigger,
} from '@/components/ui/menubar';
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem onClick={createInvoice}>
New invoice
<MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
<MenubarItem onClick={duplicate}>Duplicate</MenubarItem>
<MenubarSeparator />
<MenubarItem variant="destructive" onClick={remove}>
Delete
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem onClick={undo}>
Undo
<MenubarShortcut>⌘Z</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>;With Checkbox and Radio Items
Place the label of a MenubarRadioGroup inside the group, and set inset on the label.
<MenubarContent>
<MenubarGroup>
<MenubarCheckboxItem defaultChecked>Show taxes</MenubarCheckboxItem>
<MenubarCheckboxItem>Show discounts</MenubarCheckboxItem>
</MenubarGroup>
<MenubarSeparator />
<MenubarRadioGroup defaultValue="comfortable">
<MenubarLabel inset>Row density</MenubarLabel>
<MenubarRadioItem value="comfortable">Comfortable</MenubarRadioItem>
<MenubarRadioItem value="compact">Compact</MenubarRadioItem>
</MenubarRadioGroup>
</MenubarContent>API Reference
Apart from Menubar, MenubarMenu, MenubarTrigger, and MenubarContent, the other exports are the parts of a Dropdown Menu under the Menubar prefix. variant and inset work as they do there.
Menubar accepts the props of Base UI’s Menubar. See the Base UI Menubar documentation for modal, loopFocus, orientation, and disabled.
MenubarContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | 'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end' | 'bottom' | The side of the name the menu opens on |
sideOffset | number | OffsetFunction | 8 | The gap between the name and the menu, in pixels |
align | 'start' | 'center' | 'end' | 'start' | The edge of the name the menu is aligned with |
alignOffset | number | OffsetFunction | -4 | A shift along that edge, in pixels |