NAVIGATION

ContextMenu

Right-click menu built on Radix ContextMenu. Mirrors DropdownMenu in API and item types — the difference is the trigger: any wrapped element opens on contextmenu events (right click, long press on touch, Shift-F10).

Import

1import {
2  ContextMenu,
3  ContextMenuTrigger,
4  ContextMenuContent,
5  ContextMenuItem,
6  ContextMenuLabel,
7  ContextMenuSeparator,
8} from 'damo-ui'

Basic usage — right-click the area below

Right-click on me
1<ContextMenu>
2  <ContextMenuTrigger asChild>
3    <div className="px-6 py-12 border-2 border-dashed border-memphis text-center">
4      Right-click on me
5    </div>
6  </ContextMenuTrigger>
7  <ContextMenuContent>
8    <ContextMenuLabel>Item</ContextMenuLabel>
9    <ContextMenuItem>
10      Open
11      <ContextMenuShortcut>⌘O</ContextMenuShortcut>
12    </ContextMenuItem>
13    <ContextMenuItem>Rename</ContextMenuItem>
14    <ContextMenuSeparator />
15    <ContextMenuItem className="text-destructive">Delete</ContextMenuItem>
16  </ContextMenuContent>
17</ContextMenu>

Props

ContextMenu props
PropTypeDefaultDescription
modalbooleantrueTrap focus while the menu is open. Set false to allow interaction with the rest of the page.
onOpenChange(open: boolean) => void—Fires when the menu opens or closes.

When to use

  • File managers, table rows, canvas elements — anywhere users expect a right-click menu of contextual actions.
  • Don't replace primary affordances with ContextMenu only — touch users on iOS discover them via long-press, but Android contexts are spotty. Always provide an equivalent action via a button or DropdownMenu.

Accessibility

  • Radix wires role="menu" + role="menuitem" the same way DropdownMenu does, including support for checkbox / radio items.
  • Keyboard: Shift + F10 opens the menu from the focused trigger. Arrows cycle items; Esc closes.
← DropdownMenuNavItem →