Components

Context menu

Right-click activation. Reserve for power-user shortcuts on table rows, cards, or canvas objects — never for the primary action.

When to usewhen a surface has many secondary actions that are all reachable from the main UI, but faster via right-click for power users.

Import

import {
  ContextMenu, ContextMenuTrigger, ContextMenuContent,
  ContextMenuGroup, ContextMenuLabel, ContextMenuSeparator,
  ContextMenuItem, ContextMenuShortcut,
} from "@ravnhq/efni/context-menu"

Right-click the row

Right-click here

<ContextMenu>
  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuGroup>
      <ContextMenuLabel>Mission MB-4472</ContextMenuLabel>
      <ContextMenuSeparator />
      <ContextMenuItem><Icon icon={Pencil} />Rename</ContextMenuItem>
    </ContextMenuGroup>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive"><Icon icon={Trash2} />Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Accessibility

Key	Action
`Right-click / Menu key`	Open the menu on the focused target.
`ArrowUp / ArrowDown`	Move between items.
`Enter`	Activate the focused item.
`Escape`	Close the menu.

ContextMenuLabel must live inside ContextMenuGroup — Base UI throws MenuGroupContext is missing otherwise.
Every right-click target should also be operable via keyboard or an on-screen button — right-click is an accelerator, not the only path.

Guidelines

Mirror table-row context menus with a Dropdown menu button so keyboard-only users have parity.
Group by object identity — put the object's label at the top of the menu.
Reserve the destructive variant for actions that can lose data.

Don't

Don't override the browser context menu on generic backgrounds — attach to specific rows or cards.
Don't bury critical actions here that aren't reachable elsewhere.
Don't nest more than one level of submenu without a very good reason.

Props

Prop	Type	Default	Description
`ContextMenuContent.side`	`"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"`	`"right"`	Which side of the anchor element to align the popup against. May automatically change to avoid collisions.
`ContextMenuContent.align`	`"center" \| "start" \| "end"`	`"start"`	How to align the popup relative to the specified side.
`ContextMenuItem.variant`	`"default" \| "destructive"`	`"default"`	Destructive tone for delete-style actions.
`ContextMenuItem.disabled`	`boolean`	`false`	Whether the component should ignore user interaction.
`ContextMenuItem.inset`	`boolean`	—	Indent to line up with items that have an icon or a checkmark.
`…props`	`ContextMenuPrimitive.Root.Props`	—	Everything ContextMenu passes to the element it renders.