124k
New

上下文菜单

PreviousNext

显示通过右键点击触发的操作菜单。

Base UIReact AriaRadix UI
Radix UI
import {
  ContextMenu,
  ContextMenuCheckboxItem,

安装

pnpm dlx shadcn@latest add context-menu

用法

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
  <ContextMenuTrigger>在此处右键点击</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>个人资料</ContextMenuItem>
    <ContextMenuItem>账单</ContextMenuItem>
    <ContextMenuItem>团队</ContextMenuItem>
    <ContextMenuItem>订阅</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

组合

使用以下组合构建一个 ContextMenu：

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuCheckboxItem
    │   └── ContextMenuCheckboxItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   └── ContextMenuRadioGroup
    │       ├── ContextMenuRadioItem
    │       └── ContextMenuRadioItem
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent
            └── ContextMenuGroup
                ├── ContextMenuItem
                └── ContextMenuItem

基础

一个带有少量操作的简单上下文菜单。

import {
  ContextMenu,
  ContextMenuContent,

子菜单

使用 ContextMenuSub 嵌套二级操作。

import {
  ContextMenu,
  ContextMenuContent,

快捷键

添加 ContextMenuShortcut 显示键盘提示。

import {
  ContextMenu,
  ContextMenuContent,

分组

将相关操作分组并用分割线隔开。

import {
  ContextMenu,
  ContextMenuContent,

图标

结合图标和标签，快速浏览。

import {
  ClipboardPasteIcon,
  CopyIcon,

复选框

使用 ContextMenuCheckboxItem 创建切换项。

import {
  ContextMenu,
  ContextMenuCheckboxItem,

单选项

使用 ContextMenuRadioItem 创建单选选项。

"use client"

import * as React from "react"

危险操作

使用 variant="destructive" 样式标记菜单项为危险操作。

import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

import {

侧边位置

通过 side 和 align 属性控制子菜单的位置。

"use client"

import * as React from "react"

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

API 参考

更多信息请查看 Radix UI 文档。