Menu Bar

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

API Reference

Preview

Installation

Usage

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menu-bar"
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>New Tab</MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API Reference

Root container. Wraps Menubar from Base UI with border and background styling.

Menu root. Alias for DropdownMenu.

Trigger button for a menu. Styled wrapper for DropdownMenuTrigger with menubar-specific styling.

Popup content for a menu. Alias for DropdownMenuContent.

Groups related menu items. Alias for DropdownMenuGroup.

Label for a menu group. Alias for DropdownMenuGroupLabel.

Individual selectable menu item. Alias for DropdownMenuItem.

Visual separator between items or groups. Alias for DropdownMenuSeparator.

Submenu container. Alias for DropdownMenuSubmenu.

Trigger for opening a submenu. Alias for DropdownMenuSubmenuTrigger.

Toggleable menu item with a check indicator. Alias for DropdownMenuCheckboxItem.

Container for exclusive radio menu items. Alias for DropdownMenuRadioGroup.

Radio menu item with a dot indicator. Alias for DropdownMenuRadioItem.

Examples

Checkbox

Radio