kaze風
Dropdown
ドロップダウンメニュー
プレビュー
使いどころ
使う場面
- 1 つのボタンに、関連する操作を 3 つ以上まとめる（編集、複製、削除）
- 行ごとの「…」メニューなど、省スペースで操作を出したいとき
- DropdownTrigger、DropdownMenu、DropdownItem を並べ、項目の onSelect で処理する。区切りは DropdownSeparator
使わない場面
- フォームの値を選ぶこと。Select か Combobox を使う（Dropdown は操作を実行する）
- ページ移動のナビゲーション。Sidebar や Breadcrumb を使う
- 操作が 1〜2 個のとき。Button を直接並べる
- 入力欄やフィルターなど、操作できる中身を入れる。Popover を使う
使い方
<Dropdown>
<DropdownTrigger>
<Button>メニュー</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownItem>項目1</DropdownItem>
<DropdownItem>項目2</DropdownItem>
</DropdownMenu>
</Dropdown>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
children必須 | ReactNode | なし | DropdownTrigger と DropdownMenu |
open | boolean | なし | 開閉状態（制御） |
defaultOpen | boolean | なし | 初期の開閉状態（非制御） |
onOpenChange | (open: boolean) => void | なし | 開閉が変わる時のコールバック |
Dropdown | コンポーネント | なし | ドロップダウンのルート要素 |
DropdownTrigger | サブコンポーネント | なし | ドロップダウンを開くトリガー要素 |
DropdownMenu | サブコンポーネント | なし | ドロップダウンのメニューコンテナ |
DropdownItem | サブコンポーネント | なし | メニューアイテム |
DropdownSeparator | サブコンポーネント | なし | メニューアイテム間のセパレーター |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Enter / Space | トリガーでメニューを開き、最初の項目にフォーカスする。項目では選択して閉じる |
| ↓ / ↑ | トリガーでは開いて最初 / 最後の項目に移る。メニューでは次 / 前の項目に移る（端で回る） |
| Home / End | 最初 / 最後の項目に移る |
| 文字キー | その文字で始まる項目に移る（日本語の入力中は除く） |
| Escape / Tab | メニューを閉じてトリガーにフォーカスを戻す。Tab はそのまま次の要素へ進む |
アクセシビリティ
- トリガーに aria-haspopup="menu"、aria-expanded、aria-controls が付く。メニューは role="menu"、項目は role="menuitem"
- 項目を選ぶとメニューが閉じ、フォーカスはトリガーに戻る
- disabled の項目は aria-disabled になり、矢印キーの移動から外れる
- 削除など危険な操作は項目のラベルで明示し、Dialog で確認する
文言
- 項目は動詞で書き、語尾をそろえる（「名前を変更」「複製」「削除」）
- 危険な操作は区切りを入れて、最後に置く