Context Menu

項目や領域のコンテキスト操作から、関連コマンドを開く場合に使います。

プレビュー

文書のコンテキスト操作

文書ツールのメニューを開き、ローカルの元に戻す操作と詳細設定のチェックを試します。

文書ツール

保存済み

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/context-menu

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

対象を ContextMenuTrigger で囲み、ContextMenuContent に明確な名前の項目を置きます。重要なコマンドは通常の見える操作からも実行できるようにします。

"use client";

import { useState } from "react";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu";

export default function Example() {
  const [message, setMessage] = useState("Right-click the document.");
  return (
    <div>
      <ContextMenu>
        <ContextMenuTrigger className="block p-6">Document</ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem onClick={() => setMessage("Document duplicated.")}>Duplicate</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p role="status">{message}</p>
    </div>
  );
}

API リファレンス

Base UI のポインターアンカーとキーボード操作を維持し、ポップアップを浮いたニューモーフィズム表面で表現します。通常項目、チェック、ラジオ、サブメニュー、破壊的操作を組み合わせられます。

コンポーネント	プロパティ	型	デフォルト	説明
`ContextMenu`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	メニューの開閉状態を制御します。
`ContextMenuContent`	`side / align / sideOffset`	`Positioner props`	`—`	ポインター基準のポップアップ位置と間隔を調整します。
`ContextMenuItem`	`disabled`	`boolean`	`false`	項目を表示したまま実行できない状態にします。
`ContextMenuCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	チェック可能な項目の状態を制御します。
`ContextMenuRadioGroup`	`value / onValueChange`	`string / (value: string) => void`	`—`	相互排他的なラジオ項目の選択を制御します。

プレビュー

文書のコンテキスト操作

インストール

使い方

API リファレンス

アクセシビリティ