125k

Context Menu

PreviousNext

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

BaseRadixReact Aria
"use client"

import { Pressable } from "react-aria-components"

インストール

pnpm dlx shadcn@latest add context-menu

使用法

import { Pressable } from "react-aria-components"
 
import {
  ContextMenu,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenuTrigger>
  <Pressable>
    <div role="button">Right click here</div>
  </Pressable>
  <ContextMenu>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>

構成

次の構成を使用して ContextMenu を作成します。

ContextMenuTrigger
├── Pressable
└── ContextMenuContent
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent
            └── ContextMenuGroup
                ├── ContextMenuItem
                └── ContextMenuItem

基本

いくつかのアクションを備えたシンプルなコンテキスト メニュー。

"use client"

import { Pressable } from "react-aria-components"

サブメニュー

二次アクションをネストするには ContextMenuSub を使用します。

"use client"

import { Pressable } from "react-aria-components"

ショートカット

キーボード ヒントを表示するには、ContextMenuShortcut を追加します。

"use client"

import { Pressable } from "react-aria-components"

グループ

関連するアクションをグループ化し、区切り線で区切ります。

"use client"

import { Pressable } from "react-aria-components"

アイコン

アイコンとラベルを組み合わせて、すばやくスキャンします。

"use client"

import {

チェックボックス

切り替えには selectionMode="multiple" を使用します。

"use client"

import { useState } from "react"

ラジオ

排他的な選択には selectionMode="single" を使用します。

"use client"

import * as React from "react"

破壊的

variant="destructive" を使用して、メニュー項目を破壊的なスタイルに設定します。

"use client"

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

配置

placement プロパティを使用してサブメニューの配置を制御します。

"use client"

import { Pressable } from "react-aria-components"

RTL

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

"use client"

import * as React from "react"

placement="end" を使用して、トリガーの論理終了側にメニューを配置します。

<ContextMenuTrigger>
  <Pressable>
    <div role="button">Right click here</div>
  </Pressable>
  <ContextMenu placement="end">
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenu>
</ContextMenuTrigger>

API リファレンス

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