113k
New

上下文菜单

PreviousNext

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

Radix UIBase 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 { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

import {

位置

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

import {
  ContextMenu,
  ContextMenuContent,

从右向左

要在 shadcn/ui 中启用 RTL（从右向左）支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

使用 side="inline-end" 将菜单显示在触发器的逻辑右侧。

<ContextMenu>
  <ContextMenuTrigger>右键点击这里</ContextMenuTrigger>
  <ContextMenuContent side="inline-end">
    <ContextMenuItem>个人资料</ContextMenuItem>
    <ContextMenuItem>账单</ContextMenuItem>
    <ContextMenuItem>团队</ContextMenuItem>
    <ContextMenuItem>订阅</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API 参考

更多信息请参见 Base UI 文档。