navigation/@mihcm/ui·v0.21.0·stable

Menubar

Horizontal menu bar with dropdown menus, powered by Radix. Supports density, surfaces, alignment, dropdown sizing, portal behavior, animation, item tones, shortcuts, checkbox/radio items, and submenus.

Configurator Examples Usage Accessibility Api

Live preview

Adjust the controls on the right; the preview and code update in real time.

example.tsxtsx

StackBlitz

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

export function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New Tab <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem tone="danger">
            Delete draft <MenubarShortcut>⌘⌫</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Install

Both paths are valid. CLI ships the source into your repo (you own it). Install pins via npm.

npx @mihcm/cli add Menubar

Copies the source into components/ds/Menubar.tsx. You own the file. Use --out to override the directory or --force to overwrite.