Menubar

A visually persistent menu common in desktop applications providing quick access to commands.

navigationinteractiveoverlay

Loading preview...

Installation

npx baseui-cn add menubar

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
} from "@/components/ui/menubar"

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

API

MenubarContent

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment of the dropdown relative to the trigger
`alignOffset`	`number`	`-4`	Offset in px along the alignment axis
`sideOffset`	`number`	`8`	Distance in px between the menu and the menubar trigger

MenubarItem

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	Applies destructive red styling to the item
`inset`	`boolean`	—	Adds left padding to align text with icon items

MenubarLabel / MenubarSubTrigger / MenubarCheckboxItem / MenubarRadioItem

Each of these accepts an inset (boolean) prop that adds left padding to align content with icon-bearing menu items.

API Reference

See the Base UI Menubar documentation for the full API reference, including all props, data attributes, and CSS classes.