ContextMenu

Right-click (or touch long-press) context menu for contextual actions on a region.

Examples

Default

Right-click this area

<ContextMenu
  items={[
    {icon: Pencil, label: 'Rename'},
    {icon: Copy, label: 'Duplicate'},
    {type: 'divider'},
    {icon: Trash, label: 'Delete'},
  ]}>
  <div className={styles.target}>
    <Text as="span" type="body">
      Right-click this area
    </Text>
  </div>
</ContextMenu>

Touch Long Press

Long-press this area on a touch device (or right-click)

<ContextMenu
  items={[
    {icon: Pencil, label: 'Rename'},
    {icon: Copy, label: 'Duplicate'},
    {type: 'divider'},
    {icon: Trash, label: 'Delete'},
  ]}>
  <div className={styles.target}>
    <Text as="span" type="body">
      Long-press this area on a touch device (or right-click)
    </Text>
  </div>
</ContextMenu>

With Descriptions

Right-click for actions with descriptions

<ContextMenu
  items={[
    {
      description: 'Change the file name',
      icon: Pencil,
      label: 'Rename',
    },
    {
      description: 'Create an identical copy',
      icon: Copy,
      label: 'Duplicate',
    },
    {type: 'divider'},
    {
      description: 'Move to trash',
      icon: Trash,
      label: 'Delete',
    },
  ]}>
  <div className={styles.target}>
    <Text as="span" type="body">
      Right-click for actions with descriptions
    </Text>
  </div>
</ContextMenu>

With Shortcuts

Right-click for actions with shortcuts

<ContextMenu
  menuContent={
    <>
      <ContextMenuItem
        endContent={<Kbd keys="mod+r" />}
        icon={Pencil}
        label="Rename"
      />
      <ContextMenuItem
        endContent={<Kbd keys="mod+d" />}
        icon={Copy}
        label="Duplicate"
      />
      <Divider />
      <ContextMenuItem
        endContent={<Kbd keys="backspace" />}
        icon={Trash}
        label="Delete"
      />
    </>
  }>
  <div className={styles.target}>
    <Text as="span" type="body">
      Right-click for actions with shortcuts
    </Text>
  </div>
</ContextMenu>

With Disabled Items

Right-click — some actions disabled

<ContextMenu
  items={[
    {icon: Pencil, label: 'Rename'},
    {icon: Copy, isDisabled: true, label: 'Duplicate'},
    {type: 'divider'},
    {icon: Trash, isDisabled: true, label: 'Delete'},
  ]}>
  <div className={styles.target}>
    <Text as="span" type="body">
      Right-click — some actions disabled
    </Text>
  </div>
</ContextMenu>

Disabled

Right-click falls through to browser menu

<ContextMenu
  isDisabled
  items={[
    {icon: Pencil, label: 'Rename'},
    {icon: Copy, label: 'Duplicate'},
  ]}>
  <div className={styles.target}>
    <Text as="span" type="body">
      Right-click falls through to browser menu
    </Text>
  </div>
</ContextMenu>

Size Variants

Small

Medium

Large

<div style={{display: 'flex', gap: '2rem'}}>
  <ContextMenu items={items} size="sm">
    <div className={styles.target}>
      <Text as="span" type="body">
        Small
      </Text>
    </div>
  </ContextMenu>
  <ContextMenu items={items} size="md">
    <div className={styles.target}>
      <Text as="span" type="body">
        Medium
      </Text>
    </div>
  </ContextMenu>
  <ContextMenu items={items} size="lg">
    <div className={styles.target}>
      <Text as="span" type="body">
        Large
      </Text>
    </div>
  </ContextMenu>
</div>

Sections

Right-click for grouped actions

Edit

<ContextMenu
  items={[
    {
      items: [
        {icon: Pencil, label: 'Rename'},
        {icon: Copy, label: 'Duplicate'},
      ],
      title: 'Edit',
      type: 'section',
    },
    {
      items: [{icon: Download, label: 'Export'}],
      title: 'Share',
      type: 'section',
    },
  ]}>
  <div className={styles.target}>
    <Text as="span" type="body">
      Right-click for grouped actions
    </Text>
  </div>
</ContextMenu>

Card Trigger

Project Alpha

Active

3 members · Last updated 2 hours ago. Right-click for options.

<ContextMenu
  items={[
    {icon: Pencil, label: 'Edit'},
    {icon: Copy, label: 'Duplicate'},
    {type: 'divider'},
    {icon: Trash, label: 'Delete'},
  ]}>
  <Card style={{width: 360}}>
    <LayoutHeader
      endContent={<Badge color="blue" label="Active" />}
      title="Project Alpha"
    />
    <LayoutContent>
      <Text color="secondary" type="supporting">
        3 members · Last updated 2 hours ago. Right-click for options.
      </Text>
    </LayoutContent>
  </Card>
</ContextMenu>

API

ContextMenu

Right-click (or touch long-press) context menu for contextual actions on a region.

When Variant 1

Prop	Type	Default	Description
`items`*	`ReadonlyArray<ContextMenuOption>`	—
`menuContent`	`never`	—
`children`*	`ReactNode`	—	The region that triggers the context menu on right-click or touch long-press.
`className`	`string`	—	Additional CSS class names applied to the menu surface.
`data-testid`	`string`	—	Test ID applied to the trigger wrapper.
`hasAutoFocus`	`boolean`	`true`	Whether to auto-focus the first menu item on open.
`isDisabled`	`boolean`	`false`	Whether the context menu is disabled.
`menuWidth`	`number \| string`	`160`	Width of the menu surface.
`onOpenChange`	`(isOpen: boolean) => void`	—	Called when the menu open state changes.
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the trigger wrapper.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Menu item size.
`style`	`CSSProperties`	—	Inline styles applied to the menu surface.

When Variant 2

Prop	Type	Default	Description
`items`	`never`	—
`menuContent`*	`ReactNode`	—
`children`*	`ReactNode`	—	The region that triggers the context menu on right-click or touch long-press.
`className`	`string`	—	Additional CSS class names applied to the menu surface.
`data-testid`	`string`	—	Test ID applied to the trigger wrapper.
`hasAutoFocus`	`boolean`	`true`	Whether to auto-focus the first menu item on open.
`isDisabled`	`boolean`	`false`	Whether the context menu is disabled.
`menuWidth`	`number \| string`	`160`	Width of the menu surface.
`onOpenChange`	`(isOpen: boolean) => void`	—	Called when the menu open state changes.
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the trigger wrapper.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Menu item size.
`style`	`CSSProperties`	—	Inline styles applied to the menu surface.

ContextMenuItem

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS class names applied to the item.
`data-testid`	`string`	—	Test ID applied to the item.
`description`	`ReactNode`	—	Supporting text shown below the label.
`endContent`	`ReactNode`	—	Trailing content.
`icon`	`IconComponent`	—	Icon rendered before the label.
`isDisabled`	`boolean`	`false`	Whether the item is disabled.
`label`*	`string`	—	Item label.
`onClick`	`() => void`	—	Called when the item is selected.
`ref`	`Ref<HTMLButtonElement>`	—	Ref forwarded to the item button.
`style`	`CSSProperties`	—	Inline styles applied to the item.