Menubar

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/menubar.json

npx shadcn@latest add https://prototyper-ui.com/r/menubar.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/menubar.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/menubar.json

This will add the following files to your project:

• components/ui/menubar.tsx
• components/ui/menu.tsx (dependency)

Usage

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New File</MenubarItem>
      <MenubarItem>Open</MenubarItem>
      <MenubarItem>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Anatomy

<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarLabel />
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>
          <MenubarShortcut />
        </MenubarItem>
      </MenubarGroup>
      <MenubarCheckboxItem />
      <MenubarRadioGroup>
        <MenubarRadioItem />
      </MenubarRadioGroup>
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent>
          <MenubarItem />
        </MenubarSubContent>
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Application Menu

Styling

Data Slots

Use data-slot attributes to target specific parts of the menubar:

Customization Examples

/* Change menubar background */
[data-slot="menubar"] {
  @apply bg-muted;
}

/* Change menu item highlight color */
[data-slot="menubar-item"][data-highlighted] {
  @apply bg-primary text-primary-foreground;
}

{/* Override styles via className */}
<Menubar className="rounded-lg">
  <MenubarMenu>
    <MenubarTrigger className="font-bold">File</MenubarTrigger>
    <MenubarContent className="w-64">
      <MenubarItem className="font-medium">Custom Item</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API Reference

Menubar

Root container that renders a horizontal menu bar.

All Base UI Menubar props are forwarded via ...props.

MenubarMenu

Individual menu within the menu bar. Wraps DropdownMenu.

All Base UI Menu.Root props are forwarded via ...props.

MenubarTrigger

Button within the menu bar that opens a dropdown menu.

All Base UI Menu.Trigger props are forwarded via ...props.

MenubarContent

The popup panel containing menu items, rendered inside a portal with a positioner.

All Base UI Menu.Popup props are forwarded via ...props.

MenubarGroup

Groups related menu items together.

All Base UI Menu.Group props are forwarded via ...props.

MenubarLabel

Non-interactive label for a group of menu items.

All Base UI Menu.GroupLabel props are forwarded via ...props.

MenubarItem

Individual actionable menu item.

All Base UI Menu.Item props are forwarded via ...props.

MenubarCheckboxItem

Toggleable checkbox menu item with a check indicator.

All Base UI Menu.CheckboxItem props are forwarded via ...props.

MenubarRadioGroup

Groups radio menu items for single-selection behavior.

All Base UI Menu.RadioGroup props are forwarded via ...props.

MenubarRadioItem

Radio-selectable menu item within a radio group.

All Base UI Menu.RadioItem props are forwarded via ...props.

MenubarSeparator

Visual separator between menu items or groups.

All Base UI Menu.Separator props are forwarded via ...props.

MenubarShortcut

Displays a keyboard shortcut hint aligned to the right of a menu item.

All standard span props are forwarded via ...props.

MenubarSub

Root provider for a submenu.

All Base UI Menu.SubmenuRoot props are forwarded via ...props.

MenubarSubTrigger

Menu item that opens a submenu on hover or keyboard navigation.

All Base UI Menu.SubmenuTrigger props are forwarded via ...props.

MenubarSubContent

Popup panel for a submenu, rendered inside a portal with a positioner.

All Base UI Menu.SubmenuPopup props are forwarded via ...props.

Accessibility

Keyboard Interactions

ARIA Attributes

• Menubar receives role="menubar".
• MenubarTrigger receives role="menuitem" within the menubar context.
• MenubarContent receives role="menu".
• MenubarItem receives role="menuitem".
• MenubarCheckboxItem receives role="menuitemcheckbox" with aria-checked.
• MenubarRadioItem receives role="menuitemradio" with aria-checked.
• MenubarSub content receives role="menu" for nested menus.
• data-disabled is set on disabled items, which sets aria-disabled.
• Focus is managed within the menu bar and returns to the trigger when a menu closes.

Related