111k
新建

Context Menu

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>

示例

基础

一个包含少量操作的简单上下文菜单。

import {
  ContextMenu,
  ContextMenuContent,

子菜单

使用 ContextMenuSub 可嵌套次级操作。

import {
  ContextMenu,
  ContextMenuContent,

快捷键

添加 ContextMenuShortcut 可以显示键盘提示。

import {
  ContextMenu,
  ContextMenuContent,

分组

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

import {
  ContextMenu,
  ContextMenuContent,

图标

将图标与标签结合，便于快速浏览。

import {
  ContextMenu,
  ContextMenuContent,

复选项

使用 ContextMenuCheckboxItem 可创建切换项。

import {
  ContextMenu,
  ContextMenuCheckboxItem,

单选

使用 ContextMenuRadioItem 可创建互斥选项。

"use client"

import * as React from "react"

危险操作

使用 variant="destructive" 可以将菜单项样式设置为危险操作。

import {
  ContextMenu,
  ContextMenuContent,

位置

使用 side 和 align 属性控制子菜单位置。

import {
  ContextMenu,
  ContextMenuContent,

RTL

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

"use client"

import * as React from "react"

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

<ContextMenu>
  <ContextMenuTrigger>在此处右键点击</ContextMenuTrigger>
  <ContextMenuContent side="inline-end">
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API 参考

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