Build · New

Menubar

The row of menus at the top of a desktop tool, like File and Edit. Each trigger opens a menu built from the Menu rows.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/menubar

Dependencies it brings: @base-ui/react

Usage

import { MenuItem, MenuSeparator } from "@/components/ui/menu";
import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenuItem shortcut="⌘N" aria-keyshortcuts="Meta+N">New transfer</MenuItem>
      <MenuSeparator />
      <MenuItem shortcut="⌘P" aria-keyshortcuts="Meta+P">Print</MenuItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Menu rows

Every Menu row works here: icons, descriptions, section labels and disabled items. A disabled item stays and says why, so people learn where the command lives.

API reference

Menubar

Prop	Type	Default	Description
`loopFocus`	`boolean`	`true`	The arrow keys wrap from the last menu to the first.
`modal`	`boolean`	`true`	While a menu is open, the page behind ignores the pointer.
`disabled`	`boolean`	`false`	Disables the whole bar.

MenubarTrigger

Prop	Type	Default	Description
`children`	`ReactNode`		Figma's Label: the menu's name.

MenubarContent

Prop	Type	Default	Description
`children`	`ReactNode`		Menu rows: `MenuItem`, `MenuSeparator`, `MenuGroup`, submenus.
`align`	`"start" \| "center" \| "end"`	`"start"`	Starts at the trigger's inline start (its right in Arabic).
`sideOffset / alignOffset`	`number`	`9 / -5`	4px under the bar; the first menu on its edge.

MenuItem

Prop	Type	Default	Description
`shortcut`	`ReactNode`		The shortcut as printed (`⌘N`), display only.
`aria-keyshortcuts`	`string`		The shortcut for screen readers (`Meta+N`). Your app handles the keys.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowRightArrowLeft`	Between menus; with a menu open, opens the next one.
`ArrowDownEnterSpace`	Opens the menu and moves to its first item.
`ArrowUpArrowDown`	Between the open menu's items.
`Esc`	Closes the menu and returns focus to its trigger.

ARIA

The bar is role="menubar"; each trigger is a menuitem with aria-haspopup and aria-expanded.
Only one trigger is in the Tab order; the arrow keys move between the rest.
Shortcut symbols are hidden from screen readers; aria-keyshortcuts says them in words.
Triggers are 28px tall with a 48px hit area vertically only, so one never takes its neighbour's clicks.

Arabic and RTL notes

Mirrors

The first menu sits on the right, and menus line up with their trigger's right edge.
ArrowLeft moves to the next menu in Arabic.
Shortcuts sit at the row's end, on the left; submenus open to the left.

Does not mirror

Shortcuts read left to right (⇧⌘E).
Non-directional icons (files, lock) don't mirror.

Numerals: Numbers in items follow the numerals setting; shortcut keys stay as printed on the keyboard.
Arabic typography: Triggers label-14 Medium, items as the Menu rows, shortcuts label-12 Medium.
Mixed-direction text: The shortcut is <kbd dir="ltr">, so ⇧⌘E keeps its order inside an Arabic row. Small screens: move the commands into a More menu or a Drawer.

All components ›