ContextMenu

context-menu

右键菜单 · Base UI context-menu 原语薄包(锚到光标) + 复用 Menu 皮肤/data-highlighted + danger

用法

基础用法

在 Trigger 区域右键（或长按）弹出菜单，菜单定位锚到光标。Item 支持 disabled 与 variant="danger"。

右键点击此区域

tsx

<ContextMenu>
  <ContextMenuTrigger className="...右键点击此区域">
    右键点击此区域
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>编辑</ContextMenuItem>
    <ContextMenuItem>复制</ContextMenuItem>
    <ContextMenuItem disabled>归档（禁用）</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">删除</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

分组带标题

用 ContextMenuGroup + ContextMenuGroupLabel 给一组命令加分组标题。

右键点击此区域

tsx

<ContextMenuContent>
  <ContextMenuGroup>
    <ContextMenuGroupLabel>操作</ContextMenuGroupLabel>
    <ContextMenuItem>编辑</ContextMenuItem>
    <ContextMenuItem>复制</ContextMenuItem>
  </ContextMenuGroup>
  <ContextMenuSeparator />
  <ContextMenuItem variant="danger">删除</ContextMenuItem>
</ContextMenuContent>

级联子菜单

ContextMenuSub 嵌套 SubTrigger + SubContent，从父项右侧展开，支持多层嵌套。

右键点击此区域

tsx

<ContextMenuSub>
  <ContextMenuSubTrigger>移动到</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>收件箱</ContextMenuItem>
    <ContextMenuItem>项目 A</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>更多分组</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>归档</ContextMenuItem>
        <ContextMenuItem>星标</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuSubContent>
</ContextMenuSub>

何时用

在某区域右键（或长按）弹出锚到光标的上下文菜单：编辑/复制/删除、级联子菜单、分组。需要全局搜索式命令入口用 Command；需要常驻可见按钮排用 Toolbar；ContextMenu 是绑定到目标区域、按需弹出的动作清单。复用 Menu 皮肤，支持 variant="danger" 危险项。

导入

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

Props

ContextMenuItem

名称	类型	默认	说明
disabled	`boolean`	—	—
closeOnClick	`boolean`	`true`	点击后是否关闭菜单。
label	`string`	—	键盘 type-ahead 用文案覆盖（children 非纯文本时补）。
variant	`"default" \| "danger"`	`"default"`	danger 用危险色（删除等）。
className	`string`	—	—

ContextMenuSubTrigger：Props disabled / label / variant?: "default" \| "danger" / className；Slots children。
ContextMenuContent / ContextMenuSubContent：Props className；Slots children。
ContextMenuTrigger / Group / GroupLabel / Separator / Sub：结构性组件（薄包 Base UI 原语，透传 children / className）。

Events

事件	类型	说明
onClick	`MouseEventHandler<HTMLElement>`	`ContextMenuItem` 点击回调。

Slots

插槽	类型	说明
children	`ReactNode`	`ContextMenuItem` 菜单项内容。

禁忌 / 坑

分组项必须包在 ContextMenuGroup 里、配 ContextMenuGroupLabel 才有正确分组语义；裸放 Item 则是无标题平铺列。
ContextMenuItem 的 children 非纯文本（如带图标）时，补 label 供键盘 type-ahead 搜索。

Playground

分组级联子菜单

右键点击此区域

<ContextMenu>
  <ContextMenuTrigger>右键此区域</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>编辑</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>移动到</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>项目 A</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">删除</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

用法

基础用法

在 Trigger 区域右键（或长按）弹出菜单，菜单定位锚到光标。Item 支持 disabled 与 variant="danger"。

右键点击此区域

tsx

<ContextMenu>
  <ContextMenuTrigger className="...右键点击此区域">
    右键点击此区域
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>编辑</ContextMenuItem>
    <ContextMenuItem>复制</ContextMenuItem>
    <ContextMenuItem disabled>归档（禁用）</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">删除</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

分组带标题

用 ContextMenuGroup + ContextMenuGroupLabel 给一组命令加分组标题。

右键点击此区域

tsx

<ContextMenuContent>
  <ContextMenuGroup>
    <ContextMenuGroupLabel>操作</ContextMenuGroupLabel>
    <ContextMenuItem>编辑</ContextMenuItem>
    <ContextMenuItem>复制</ContextMenuItem>
  </ContextMenuGroup>
  <ContextMenuSeparator />
  <ContextMenuItem variant="danger">删除</ContextMenuItem>
</ContextMenuContent>

级联子菜单

ContextMenuSub 嵌套 SubTrigger + SubContent，从父项右侧展开，支持多层嵌套。

右键点击此区域

tsx

<ContextMenuSub>
  <ContextMenuSubTrigger>移动到</ContextMenuSubTrigger>
  <ContextMenuSubContent>
    <ContextMenuItem>收件箱</ContextMenuItem>
    <ContextMenuItem>项目 A</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>更多分组</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>归档</ContextMenuItem>
        <ContextMenuItem>星标</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuSubContent>
</ContextMenuSub>

何时用

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

Props

ContextMenuItem

名称	类型	默认	说明
disabled	`boolean`	—	—
closeOnClick	`boolean`	`true`	点击后是否关闭菜单。
label	`string`	—	键盘 type-ahead 用文案覆盖（children 非纯文本时补）。
variant	`"default" \| "danger"`	`"default"`	danger 用危险色（删除等）。
className	`string`	—	—

事件

类型

说明

onClick

MouseEventHandler<HTMLElement>

ContextMenuItem 点击回调。

插槽

类型

说明

children

ReactNode

ContextMenuItem 菜单项内容。

Playground

分组级联子菜单

右键点击此区域

<ContextMenu>
  <ContextMenuTrigger>右键此区域</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>编辑</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>移动到</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>项目 A</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="danger">删除</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

ContextMenu

用法

基础用法

分组带标题

级联子菜单

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground

ContextMenu

用法

基础用法

分组带标题

级联子菜单

何时用

导入

Props

Events

Slots

禁忌 / 坑

相关

Playground