ContextMenu

A right-click and keyboard action menu for table rows, cards, files, and other contextual ERP targets.

Default

Right-click the row, focus it and press Shift+F10, or use the keyboard Context Menu key.

Invoice INV-2048Right-click or ⇧F10

tsx

<ContextMenu>
  <ContextMenuTrigger>Invoice INV-2048</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>Invoice actions</ContextMenuLabel>
    <ContextMenuItem onSelect={edit}>Edit</ContextMenuItem>
    <ContextMenuItem onSelect={duplicate}>Duplicate</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Installation

tsx

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
} from "madagent";

Submenu and Disabled Action

ContextMenu reuses DropdownMenu submenu aim, logical arrow keys, disabled states, and menu-item styling.

Quarterly report.pdf

tsx

<ContextMenuSub>
  <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Email</ContextMenuItem>
    <ContextMenuItem>Copy link</ContextMenuItem>
  </ContextMenuSubContent>
</ContextMenuSub>

Long Menu

Long action lists keep the same capped, scrollable panel and keyboard scroll-follow behavior as DropdownMenu.

Open a long action list

tsx

<ContextMenuContent>
  {actions.map(action => (
    <ContextMenuItem key={action.id}>{action.label}</ContextMenuItem>
  ))}
</ContextMenuContent>

API Reference

ContextMenu

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`onOpenChange`	`(open: boolean) => void`	-	Called when the menu opens or closes
`children`	`ReactNode`	-	ContextMenuTrigger and ContextMenuContent

ContextMenuTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Composes context-menu behavior onto the single child element
`children`	`ReactNode`	-	The target that responds to right-click and keyboard opening

ContextMenuContent

Prop	Type	Default	Description
`collisionPadding`	`number`	`8`	Minimum viewport-edge clearance in pixels
`children`	`ReactNode`	-	ContextMenuItem, ContextMenuLabel, ContextMenuDivider, and submenu components

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

الفاتورة رقم ٢٠٤٨

Usage

tsx

<ContextMenu>
  <ContextMenuTrigger>الفاتورة رقم ٢٠٤٨</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>فتح</ContextMenuItem>
    <ContextMenuItem destructive>حذف</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

<ContextMenu> <ContextMenuTrigger>Invoice INV-2048</ContextMenuTrigger> <ContextMenuContent> <ContextMenuLabel>Invoice actions</ContextMenuLabel> <ContextMenuItem onSelect={edit}>Edit</ContextMenuItem> <ContextMenuItem onSelect={duplicate}>Duplicate</ContextMenuItem> </ContextMenuContent> </ContextMenu>

<ContextMenuSub> <ContextMenuSubTrigger>Share</ContextMenuSubTrigger> <ContextMenuSubContent> <ContextMenuItem>Email</ContextMenuItem> <ContextMenuItem>Copy link</ContextMenuItem> </ContextMenuSubContent> </ContextMenuSub>

API Reference

ContextMenu

Prop	Type	Default	Description
`open`	`boolean`	-	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`onOpenChange`	`(open: boolean) => void`	-	Called when the menu opens or closes
`children`	`ReactNode`	-	ContextMenuTrigger and ContextMenuContent

ContextMenuTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Composes context-menu behavior onto the single child element
`children`	`ReactNode`	-	The target that responds to right-click and keyboard opening

ContextMenuContent

Prop	Type	Default	Description
`collisionPadding`	`number`	`8`	Minimum viewport-edge clearance in pixels
`children`	`ReactNode`	-	ContextMenuItem, ContextMenuLabel, ContextMenuDivider, and submenu components

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

الفاتورة رقم ٢٠٤٨

Usage

tsx

<ContextMenu>
  <ContextMenuTrigger>الفاتورة رقم ٢٠٤٨</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>فتح</ContextMenuItem>
    <ContextMenuItem destructive>حذف</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>