Shadcn Menubar

A menubar is a persistent row of menus — File, Edit, View. Click a trigger and the panel opens; once one is open, moving to the next trigger opens that menu. Use it for desktop-style apps, not website navigation.

Usage

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Each MenubarMenu is one trigger plus its panel. value on the root is which menu is open, not which item.

Composition

Checkbox

MenubarCheckboxItem for options that toggle independently. checked is the state.

Radio

MenubarRadioGroup plus MenubarRadioItem when only one value can be on.

Submenu

MenubarSub, MenubarSubTrigger, and MenubarSubContent nest a second panel. Keep it one level.

With Icons

Icons sit in the item before the label. variant="destructive" is the red row.

RTL

Wrap with DirectionProvider and dir="rtl". Submenus open toward the start.

API

MenubarContent

MenubarItem

MenubarCheckboxItem takes checked and onCheckedChange. MenubarRadioGroup takes value and onValueChange. MenubarLabel and MenubarSubTrigger take inset.

Keyboard

Once a menu is open, arrowing to the next trigger opens that menu.

Notes

Don’t use this as site navigation — that is a Navigation Menu.

With other components

Questions

Related