ドロップダウンメニュー
Dropdown menu
別名: プルダウンメニュー、Pulldown menu、Dropdown
生態（さわってみる）
一言定義
ボタンやリンクをクリック（または一部はホバー）すると、直下に選択肢の一覧が展開するメニューUI。
分類
使う場面
- ナビゲーションバーの1項目から複数のサブ項目に分岐させたいとき
- 常時表示すると場所を取りすぎる操作の一覧を、必要時だけ見せたいとき
避ける場面
- 選択肢が単一の値の入力・選択であるとき（→セレクトボックス）
- 選択肢が3〜5個程度で常に見せてよいとき（→ボタングループやセグメンテッドコントロール）
近縁種との比較
セレクトボックスは「1つの値を選ばせる入力フォーム部品」であるのに対し、ドロップダウンメニュー は「複数のコマンド・リンクを提示するナビゲーション／操作要素」であり、選んだ結果が入力値になる か、その場でアクションが実行されるかで区別される。コンテキストメニューは対象への右クリック （または長押し）で呼び出す点、ケバブメニューはアイコン1つがトリガーである点がドロップダウン メニューとの主な違いで、いずれも「クリックで直下に選択肢を展開する」という基本構造は共通する。
実例リンク
アクセシビリティ
- role
- トリガーは button[aria-haspopup="true"][aria-expanded]、展開パネルは role="menu"、各項目は role="menuitem"
- キーボード操作
- ▼キーで展開しフォーカスを最初の項目へ、↑↓で項目移動、Escで閉じてトリガーへフォーカスを戻す
- 補足
- 日本語の「プルダウン」は英語圏ではほぼ通じない和製寄りの用法。テキスト入力を伴う場合はコンボボックス（別カード）として扱う