Menubar

A horizontal menu bar with dropdown menus, modeled after desktop application menu bars.

When to use

• Application-style top menus for complex desktop-like web apps.
• Desktop-like UIs that need grouped commands with keyboard shortcuts.
• Admin panels with many actions organized into logical groups.
• Text editors or IDEs with File/Edit/View/Help menu conventions.

When NOT to use

• For mobile apps — use a bottom sheet or drawer instead.
• For simple navigation — use a navbar or breadcrumb.
• For single-action triggers — use a dropdown menu or button.

Import

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
} from '@mihcm/ui/Menubar';

Basic usage

<Menubar size="md" surface="default">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New Tab</MenubarItem>
      <MenubarItem>New Window</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Sizing, surfaces, and layout

Use root props for the top-level bar and matching trigger/item props for a consistent density. Use content props for dropdown width, elevation, max height, portal behavior, and animation.

<Menubar size="lg" surface="outline" justify="between" fullWidth>
  <MenubarMenu>
    <MenubarTrigger size="lg" surface="outline">
      Actions
    </MenubarTrigger>
    <MenubarContent size="xl" surface="elevated" maxHeight="md" animation="slide">
      <MenubarItem size="lg" tone="success">
        Approve <MenubarShortcut size="lg">⌘↵</MenubarShortcut>
      </MenubarItem>
      <MenubarItem size="lg" tone="danger">
        Reject <MenubarShortcut size="lg">⌘⌫</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Keyboard shortcuts

Display shortcut hints alongside menu items using MenubarShortcut. These are visual-only and do not bind the actual shortcut.

<MenubarItem>
  Save <MenubarShortcut>⌘S</MenubarShortcut>
</MenubarItem>

Checkbox and radio items

Use MenubarCheckboxItem for toggleable settings and MenubarRadioGroup with MenubarRadioItem for single-selection options within a menu.

<MenubarCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
  Show Grid
</MenubarCheckboxItem>
 
<MenubarRadioGroup value={theme} onValueChange={setTheme}>
  <MenubarRadioItem value="light">Light</MenubarRadioItem>
  <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
</MenubarRadioGroup>

Composition

• Each MenubarMenu wraps a trigger + content pair. Arrow keys navigate between menus.
• Use MenubarSeparator between groups and MenubarLabel for group headings.
• MenubarShortcut renders keyboard shortcut text right-aligned in the item.
• MenubarSub with MenubarSubTrigger and MenubarSubContent handles nested submenus.
• className remains available on every sub-component for Tailwind and MiHCM token overrides.
• Use portal={false} only when a menu must stay inside a constrained preview or test container.

Related

• DropdownMenu — single-trigger context menus.
• NavigationMenu — site navigation with links.
• ContextMenu — right-click triggered menus.