ドロップダウンメニュー

Dropdown menu

ボタンやリンクをクリック(または一部はホバー)すると、直下に選択肢の一覧が展開するメニューUI。

○ 使う場面

  • ナビゲーションバーの1項目から複数のサブ項目に分岐させたいとき
  • 常時表示すると場所を取りすぎる操作の一覧を、必要時だけ見せたいとき

× 避ける場面

  • 選択肢が単一の値の入力・選択であるとき(→ドロップダウン)
  • 選択肢が3〜5個程度で常に見せてよいとき(→ボタングループやセグメントボタン)

別名

プルダウンメニュー

近縁種との比較

「ドロップダウン」は英語で「下に垂れ下がる」という意味で、ボタンやリンクの直下に選択肢がすとんと落ちてくるように展開する見た目を、そのまま名前にしたものである。

近縁種違い・使い分け
ドロップダウンドロップダウンは1つの値を選ばせる入力フォーム部品であるのに対し、ドロップダウンメニューは複数のコマンド・リンクを提示するナビゲーション/操作要素であり、選んだ結果が入力値になるかその場でアクションが実行されるかで区別される。
コンテキストメニューコンテキストメニューは対象への右クリック(または長押し)で呼び出す点がドロップダウンメニューとの主な違いで、いずれも「クリックで直下に選択肢を展開する」基本構造は共通する。
ケバブメニューケバブメニューはアイコン1つがトリガーである点がドロップダウンメニューとの主な違いで、いずれも「クリックで直下に選択肢を展開する」基本構造は共通する。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション