Dropdown Menu

複数のコマンド、チェック設定、削除などの操作を一つのボタンにまとめる場合に使います。

プレビュー

ワークスペースの操作

ページ操作、制御された深度ガイド、テーマのラジオ選択サブメニュー、削除を確認します。

インストール

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

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

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

ワークスペースの操作

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dropdown-menu

Registry JSON

使い方

DropdownMenuTrigger と DropdownMenuContent を組み合わせます。関連項目をグループ化し、設定を表すチェック・ラジオ項目はアプリの状態に接続します。

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button />}>View options</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuCheckboxItem checked={visible} onCheckedChange={setVisible}>Show details</DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {visible && <p>Project details are visible.</p>}
    </div>
  );
}

API リファレンス

Base UI Menu を基盤とした完全な組み合わせ可能 API です。通常項目、checkbox、radio group、label、separator、shortcut、入れ子の submenu を1つのサーフェス上にまとめます。

コンポーネント	プロパティ	型	デフォルト	説明
`DropdownMenu`	`open / defaultOpen`	`boolean`	`false`	制御された open 状態、または非制御時の初期 open 状態です。
`DropdownMenu`	`onOpenChange`	`(open: boolean) => void`	`—`	menu の open 状態が変わったときに呼び出されます。
`DropdownMenuTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	button または link に trigger の動作を合成します。
`DropdownMenuContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"bottom" / "start"`	trigger を基準に popup を配置します。
`DropdownMenuContent`	`sideOffset`	`number`	`8`	trigger と popup の間隔です。
`DropdownMenuItem`	`variant`	`"default" \| "destructive"`	`"default"`	通常または destructive action のスタイルを選択します。
`DropdownMenuItem / Label`	`inset`	`boolean`	`false`	indicator を持つ行とテキストの開始位置を揃えます。
`DropdownMenuCheckboxItem`	`checked`	`boolean`	`—`	checkbox item の制御状態です。
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	checkbox item の状態が変わったときに呼び出されます。

プレビュー

ワークスペースの操作

インストール

使い方

API リファレンス

アクセシビリティ