コンテキストメニューContextMenuExperimental

右クリックで開くメニューです。

プレビュー

状態とバリエーション

ファイルの行アクション

右クリック、キーボード操作、チェック項目、単一選択を同じメニュー内で扱う例です。

テキストのみ

アイコンを使わないメニューでも、項目は左揃えで読みやすく配置します。

サブメニュー付き

関連する操作をサブメニューにまとめ、ショートカットや無効項目も同じ揃えで表示します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
modalbooleantrue開いている間のフォーカス制御をモーダルとして扱うかを指定します。
onOpenChange(open: boolean) => void-開閉状態が変わった時に呼び出されます。
disabledboolean-トリガーや項目を操作できない状態にします。
disabledReasonReactNode-無効な項目に表示する理由です。hover / focus / スマホのタップでツールチップに表示します。
portalContainerHTMLElement | null-ContextMenuContent / ContextMenuSubContent のポータル先です。疑似ブラウザやプレビュー内にメニューを閉じ込める場合に使います。

使い方

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@gunjo/ui";
import { IconCopy as Copy, IconFileText as FileText } from "@tabler/icons-react";

export function FileContextMenu() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex min-h-40 w-full max-w-md items-center justify-center rounded-lg border border-dashed bg-muted/35 p-6 text-center text-sm text-muted-foreground">
        ここを右クリックして行アクションを開く
      </ContextMenuTrigger>
      <ContextMenuContent className="w-64">
        <ContextMenuLabel>ファイル操作</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
          詳細を表示
        </ContextMenuItem>
        <ContextMenuItem>
          <Copy className="h-4 w-4 shrink-0 text-muted-foreground" />
          パスをコピー
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem inset disabled disabledReason="権限を変更するには管理者ロールが必要です。">権限を変更</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked>お気に入り</ContextMenuCheckboxItem>
        <ContextMenuRadioGroup value="viewer">
          <ContextMenuLabel inset>権限</ContextMenuLabel>
          <ContextMenuRadioItem value="viewer">閲覧者</ContextMenuRadioItem>
          <ContextMenuRadioItem value="editor">編集者</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}

使用コンポーネント

ContextMenu

関連コンポーネント

DropdownMenuMenubar

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: ContextMenu