Menus

Menubar is a horizontal, application-style menu bar (File, Edit, View) where each top-level trigger opens its own pull-down menu. Once one menu is open, hovering the others switches between them. Each menu supports the full item set: items, separators, shortcuts, checkbox and radio items, and submenus.

Live demo

The interactive story below runs from the deployed Storybook. Click a top-level item to open its menu.

Usage

Source: menubar.tsx

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from "@beacon/design-system";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo</MenubarItem>
      <MenubarItem>Redo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Parts

Part	Role
Menubar	The horizontal bar container.
MenubarMenu	One top-level menu (groups a trigger with its content).
MenubarTrigger	The top-level label (File, Edit, View).
MenubarContent	The pull-down surface for that menu.
MenubarItem	A selectable action; supports disabled.
MenubarCheckboxItem / MenubarRadioItem	Toggleable and single-select items.
MenubarSeparator	Divider between groups.
MenubarShortcut	Right-aligned keyboard hint.
MenubarSub*	Nested submenu (Sub, SubTrigger, SubContent).

When to use

• Desktop / iPad app shells that need a persistent application menu bar with many grouped commands.
• Dense, command-heavy surfaces (editors, admin tools) where a single overflow button is not enough.

Do not use a full menu bar for one button’s worth of actions; use a pull-down button instead. For object-specific right-click actions, use a context menu.