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

(): React.JSX.Element => {
  const items = [
    {icon: Pencil, label: 'Rename'},
    {icon: Copy, label: 'Duplicate'},
    {type: 'divider' as const},
    {icon: Trash, label: 'Delete'},
  ];
  return (
    <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

<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>

Positioning And Scroll

Scroll to the bottom-right target and right-click it. Scrolling this region again dismisses the menu. If left open, the menu grows after a moment so its edge flipping can be checked at narrow canvas sizes.

Scroll down and right

Right-click near the edge

function PositioningAndScrollExample(): React.JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className={styles.positioningExample}>
      <Text color="secondary" type="supporting">
        Scroll to the bottom-right target and right-click it. Scrolling this
        region again dismisses the menu. If left open, the menu grows after a
        moment so its edge flipping can be checked at narrow canvas sizes.
      </Text>
      <div className={styles.scrollRegion}>
        <div className={styles.scrollContent}>
          <Text color="secondary" type="supporting">
            Scroll down and right
          </Text>
          <div className={styles.edgeTarget}>
            <ContextMenu
              menuContent={
                isOpen ? (
                  <GrowingMenuContent />
                ) : (
                  <ContextMenuItem icon={Pencil} label="Rename" />
                )
              }
              onOpenChange={setIsOpen}>
              <div className={styles.target}>
                <Text as="span" type="body">
                  Right-click near the edge
                </Text>
              </div>
            </ContextMenu>
          </div>
        </div>
      </div>
    </div>
  );
}

function GrowingMenuContent(): React.JSX.Element {
  const [hasGrown, setHasGrown] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => setHasGrown(true), 800);
    return () => clearTimeout(timeout);
  }, []);

  return (
    <>
      <ContextMenuItem icon={Pencil} label="Rename" />
      <ContextMenuItem icon={Copy} label="Duplicate" />
      {hasGrown ? (
        <>
          <Divider />
          <ContextMenuItem label="Move to project" />
          <ContextMenuItem label="Share link" />
          <ContextMenuItem icon={Download} label="Export archive" />
          <ContextMenuItem icon={Trash} label="Delete" />
        </>
      ) : null}
    </>
  );
}

<PositioningAndScrollExample />

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
aria-keyshortcuts	AriaAttributes['aria-keyshortcuts']	—	Keyboard shortcuts that activate the menu item.
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.
hasCloseOnSelect	boolean	true	Whether activating the item closes the menu. Set to false for items users flip repeatedly, such as toggles, so the menu stays open with focus on the item.
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.
tooltip	ReactNode	—	Tooltip content shown when the item is hovered or focused.