ContextMenu

context-menu

Opens contextual action items at the pointer with a danger treatment.

Usage

Basic usage

Right-click (or long-press) on the Trigger area to pop up a menu, and the menu is anchored to the cursor. Item supports disabled and variant="danger".

Right click on this area

tsx

<ContextMenu>
  <ContextMenuTrigger className="...right-click this area">
    Right click on this area
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem disabled>Archive (Disabled)</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Group with title

Use ContextMenuGroup + ContextMenuGroupLabel to add a group title to a group of commands.

Right click on this area

tsx

<ContextMenuContent>
  <ContextMenuGroup>
    <ContextMenuGroupLabel>Operation</ContextMenuGroupLabel>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
  </ContextMenuGroup>
  <ContextMenuSeparator />
  <ContextMenuItem variant="danger">Delete</ContextMenuItem>
</ContextMenuContent>

Cascading submenu

ContextMenuSub nests SubTrigger + SubContent, expanded from the right side of the parent item, supporting multi-level nesting.

Right click on this area

tsx

<ContextMenuSub>
  <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Inbox</ContextMenuItem>
    <ContextMenuItem>Project A</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More groups</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Archive</ContextMenuItem>
        <ContextMenuItem>Star</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuSubContent>
</ContextMenuSub>

When to use

Use ContextMenu to open pointer-anchored actions from a right click or long press within a target region, including Edit, Copy, Delete, nested submenus, and groups. Use Command for a global searchable command entry or Toolbar for persistent controls. ContextMenu reuses Menu styling and supports variant="danger" for destructive items.

Import

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from "@hulianui/ui"

Props

ContextMenuItem

Name	Type	Default	Description
disabled	`boolean`	—	Whether the item is unavailable.
closeOnClick	`boolean`	`true`	Whether selecting the item closes the menu.
label	`string`	—	Text override for keyboard type-ahead, needed when children are not plain text.
variant	`"default" \| "danger"`	`"default"`	Visual treatment; use danger for destructive actions.
className	`string`	—	Additional class name.

ContextMenuSubTrigger: props disabled / label / variant?: "default" \| "danger" / className; slot children.
ContextMenuContent / ContextMenuSubContent: prop className; slot children.
ContextMenuTrigger / Group / GroupLabel / Separator / Sub: structural wrappers around the corresponding Base UI primitives, forwarding children and className.

Events

Event	Type	Description
onClick	`MouseEventHandler<HTMLElement>`	`ContextMenuItem` click handler.

Slots

Slot	Type	Description
children	`ReactNode`	Content of a `ContextMenuItem`.

Example

tsx

<ContextMenu>
  <ContextMenuTrigger className="flex h-28 items-center justify-center border border-dashed">
    Right-click this area
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem disabled>Archive (unavailable)</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Project A</ContextMenuItem>
        <ContextMenuItem>Project B</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Usage guidelines

Wrap grouped entries in ContextMenuGroup and label them with ContextMenuGroupLabel for correct group semantics. Bare items form one unlabelled list.
When ContextMenuItem children contain rich content such as an icon, add label for keyboard type-ahead.

Command · Toolbar · Accordion · Collapsible · Link · AnimatedThemeToggler

Playground

GroupingCascading submenu

Right click on this area

<ContextMenu>
  <ContextMenuTrigger>Right-click this area</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Project A</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Usage

Basic usage

Right-click (or long-press) on the Trigger area to pop up a menu, and the menu is anchored to the cursor. Item supports disabled and variant="danger".

Right click on this area

tsx

<ContextMenu>
  <ContextMenuTrigger className="...right-click this area">
    Right click on this area
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem disabled>Archive (Disabled)</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Group with title

Use ContextMenuGroup + ContextMenuGroupLabel to add a group title to a group of commands.

Right click on this area

tsx

<ContextMenuContent>
  <ContextMenuGroup>
    <ContextMenuGroupLabel>Operation</ContextMenuGroupLabel>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
  </ContextMenuGroup>
  <ContextMenuSeparator />
  <ContextMenuItem variant="danger">Delete</ContextMenuItem>
</ContextMenuContent>

Cascading submenu

ContextMenuSub nests SubTrigger + SubContent, expanded from the right side of the parent item, supporting multi-level nesting.

Right click on this area

tsx

<ContextMenuSub>
  <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>Inbox</ContextMenuItem>
    <ContextMenuItem>Project A</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More groups</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Archive</ContextMenuItem>
        <ContextMenuItem>Star</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuSubContent>
</ContextMenuSub>

When to use

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent } from "@hulianui/ui"

Props

ContextMenuItem

Name	Type	Default	Description
disabled	`boolean`	—	Whether the item is unavailable.
closeOnClick	`boolean`	`true`	Whether selecting the item closes the menu.
label	`string`	—	Text override for keyboard type-ahead, needed when children are not plain text.
variant	`"default" \| "danger"`	`"default"`	Visual treatment; use danger for destructive actions.
className	`string`	—	Additional class name.

Event

Type

Description

onClick

MouseEventHandler<HTMLElement>

ContextMenuItem click handler.

Slot

Type

Description

children

ReactNode

Content of a ContextMenuItem.

<ContextMenu> <ContextMenuTrigger className="flex h-28 items-center justify-center border border-dashed"> Right-click this area </ContextMenuTrigger> <ContextMenuContent> <ContextMenuItem>Edit</ContextMenuItem> <ContextMenuItem disabled>Archive (unavailable)</ContextMenuItem> <ContextMenuSub> <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger> <ContextMenuSubContent> <ContextMenuItem>Project A</ContextMenuItem> <ContextMenuItem>Project B</ContextMenuItem> </ContextMenuSubContent> </ContextMenuSub> <ContextMenuSeparator /> <ContextMenuItem variant="danger">Delete</ContextMenuItem> </ContextMenuContent> </ContextMenu>

Playground

GroupingCascading submenu

Right click on this area

<ContextMenu>
  <ContextMenuTrigger>Right-click this area</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Project A</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

ContextMenu

Usage

Basic usage

Group with title

Cascading submenu

When to use

Import

Props

Events

Slots

Example

Usage guidelines

Related

Playground

ContextMenu

Usage

Basic usage

Group with title

Cascading submenu

When to use

Import

Props

Events

Slots

Example

Usage guidelines

Related

Playground