Menubar

A persistent horizontal menu common in desktop applications, with menus, items, separators, shortcuts, checkboxes, radio groups, and sub-menus — built on Radix UI's Menubar primitive.

Install

npx shadcn@latest add https://atomx.acau.net/r/menubar.json

Use Menubar for the always-visible top-of-app menu bar in desktop-style applications (File / Edit / View / Window) where multiple top-level menus need to coexist and stay anchored. Reach for Dropdown Menu instead when a single menu should open from one trigger button.

Render one MenubarMenu per top-level menu and place items inside MenubarContent. Use MenubarSeparator between groups, MenubarShortcut for keyboard hints, and MenubarSub + MenubarSubTrigger + MenubarSubContent for nested menus.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New Tab</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="destructive">Quit</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Preview

Props

Component	Notable props
`MenubarTrigger`	Standard button props.
`MenubarContent`	`align` (default `"start"`), `alignOffset` (default `-4`), `sideOffset` (default `8`).
`MenubarItem`	`inset` — left-indent to align with items that have icons. `variant` — `"default"` or `"destructive"`. `onSelect`, `disabled`.
`MenubarLabel`	`inset` — matches `MenubarItem` indent.
`MenubarCheckboxItem`	`checked`, `onCheckedChange`.
`MenubarRadioGroup` / `MenubarRadioItem`	`value` / `onValueChange` for mutually exclusive choices.
`MenubarSub` / `MenubarSubTrigger` / `MenubarSubContent`	Nested sub-menu.
`MenubarSeparator`	Horizontal divider.
`MenubarShortcut`	Right-aligned keyboard hint span.

Menubar

Install

Usage

Preview

Props

On this page