Menu Bar

Actions

A horizontal bar of application-level menus, like File and Edit.

A menu bar provides the primary commands of an application in the classic File, Edit, View arrangement. It is composed of the Base UI Menubar root and Menu parts, with roving focus handled for you.

npx shadcn@latest add menubar

Basic

Open a menu from its label, then navigate with arrow keys.

Preview

Live

tsx

1<MenuBar aria-label="Application menu">
2  <MenuBarMenu>
3    <MenuBarTrigger render={<Button variant="ghost" size="sm">File</Button>} />
4    <MenuBarContent className="w-48">
5      <MenuBarItem>New file</MenuBarItem>
6      <MenuBarItem>Open…</MenuBarItem>
7      <MenuBarSeparator />
8      <MenuBarItem>Save</MenuBarItem>
9    </MenuBarContent>
10  </MenuBarMenu>
11  <MenuBarMenu>
12    <MenuBarTrigger render={<Button variant="ghost" size="sm">Edit</Button>} />
13    <MenuBarContent className="w-48">
14      <MenuBarItem>Undo</MenuBarItem>
15      <MenuBarItem>Redo</MenuBarItem>
16    </MenuBarContent>
17  </MenuBarMenu>
18</MenuBar>

Icons

Menu items can carry icons and shortcuts like any dropdown.

Preview

Live

tsx

1<MenuBar aria-label="Application menu">
2  <MenuBarMenu>
3    <MenuBarTrigger render={<Button variant="ghost" size="sm">File</Button>} />
4    <MenuBarContent className="w-48">
5      <MenuBarItem>
6        <FileText />
7        New
8      </MenuBarItem>
9      <MenuBarItem>
10        <Save />
11        Save
12      </MenuBarItem>
13      <MenuBarSeparator />
14      <MenuBarItem>
15        <Trash2 className="text-red-500" />
16        Delete
17      </MenuBarItem>
18    </MenuBarContent>
19  </MenuBarMenu>
20</MenuBar>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
orientation	"horizontal" \| "vertical"= "horizontal"	The orientation of the menubar and its menus.
modal	boolean= true	Whether page interaction is locked while a menu is open.
disabled	boolean= false	Disables the entire menubar.
sideOffset	number= 4	Distance in pixels between the trigger and the popup.
render	React.ElementType	Renders the trigger as a different element or component.