Component

Menu Bar

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

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

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>

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