Context Menu

Context menus expose actions for a work order, row, or canvas item at the place where it is being used. The same actions should remain available elsewhere because right-click is not available on every device.

Right-click, or focus and press Shift+F10

Show codeCopy

Import

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@workshop1/ui/components/context-menu"

Composition

Wrap the target region with ContextMenuTrigger asChild; the trigger can be a card, table row, or focused canvas surface. Put ContextMenuContent next to it and group related actions with ContextMenuSeparator or ContextMenuLabel. Use the checkbox, radio, and submenu variants when the context menu changes a view setting rather than performing a one-off action.

The menu is portalled by the shared component so it can escape clipping containers. Do not add a second portal around ContextMenuContent.

Accessibility

Keep the trigger region keyboard reachable when it represents an interactive object, and make the same action set available through a visible button or the object's normal keyboard actions. Radix supplies the context-menu role, focus management, Arrow key navigation, and Escape dismissal.

Best practices

• Use context menus as a shortcut to visible actions, never as the only way to complete a task.
• Keep the menu specific to the target object; avoid global application commands here.
• Use variant="destructive" for delete or irreversible actions and separate them from routine actions.
• Give the target a clear accessible name so assistive technology can identify what is focused.