Component

Menu Bar

Horizontal menu bar with keyboard-navigable menus. Ideal for application-style top toolbars.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/menu-bar

Usage

Use a menu bar in desktop-style app shells where users need access to grouped commands across File, Edit, View, etc.

Playground

Preview

Configure

Menu items

Number of top-level menus shown in the bar.

Code

<MenuBar>
  <MenuBarMenu>
    <MenuBarTrigger>File</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>New File <MenuBarShortcut>⌘N</MenuBarShortcut></MenuBarItem>
      <MenuBarItem>Open… <MenuBarShortcut>⌘O</MenuBarShortcut></MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem>Save <MenuBarShortcut>⌘S</MenuBarShortcut></MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
  <MenuBarMenu>
    <MenuBarTrigger>Edit</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>Undo <MenuBarShortcut>⌘Z</MenuBarShortcut></MenuBarItem>
      <MenuBarItem>Redo <MenuBarShortcut>⌘⇧Z</MenuBarShortcut></MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem>Cut</MenuBarItem>
      <MenuBarItem>Copy</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
  <MenuBarMenu>
    <MenuBarTrigger>View</MenuBarTrigger>
    <MenuBarContent>
      <MenuBarItem>Zoom In</MenuBarItem>
      <MenuBarItem>Zoom Out</MenuBarItem>
      <MenuBarSeparator />
      <MenuBarItem>Toggle Sidebar</MenuBarItem>
    </MenuBarContent>
  </MenuBarMenu>
</MenuBar>

Variants & States

Supported variants, sizes, and interaction states for this component.

Configurations

Two menus
Three menus
Four menus

Do

Group related commands under clear top-level menu names
Show keyboard shortcuts next to menu items using MenuBarShortcut

Don't

Don't use a menu bar for top-level site navigation, use a top nav instead
Don't nest more than 2 levels of submenus