MiHCM
overlay/@mihcm/ui·v0.21.0·stable

ContextMenu

Right-click context menu powered by Radix. Sub-menus, checkboxes, radio items, keyboard shortcuts.

ConfiguratorExamplesUsageAccessibilityApi

ContextMenu

Right-click context menu powered by Radix. Shares visual styling with DropdownMenu for consistency.

When to use

  • File/item actions — copy, paste, rename, delete.
  • Canvas editors — right-click for contextual tools.
  • Table rows — contextual actions on data items.

When NOT to use

Import

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from '@mihcm/ui/ContextMenu';

Basic usage

<ContextMenu>
  <ContextMenuTrigger>
    <div className="border p-8">Right-click here</div>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onSelect={() => {}}>Edit</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive" onSelect={() => {}}>
      Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With shortcuts

<ContextMenuItem>
  Copy <ContextMenuShortcut>⌘C</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSub>
  <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Save As…</ContextMenuItem>
    <ContextMenuItem>Developer Tools</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

Composition

  • Wrap the right-click target in ContextMenuTrigger. The menu appears on contextmenu event.
  • Use ContextMenuSub for nested submenus (one level deep is best — deeper nesting is hard to navigate).
  • ContextMenuCheckboxItem and ContextMenuRadioItem handle toggle/select patterns.
  • ContextMenuShortcut renders keyboard shortcut hints right-aligned in each item.