125k

Context Menu

PreviousNext

右クリックによってトリガーされるアクションのメニューを表示します。

BaseRadixReact Aria
import {
  ContextMenu,
  ContextMenuCheckboxItem,

インストール

pnpm dlx shadcn@latest add context-menu

使用法

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</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 {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import * as React from "react"

API リファレンス

詳細については、Radix UI ドキュメントを参照してください。