UI Component Lab English

← コンポーネント一覧

アクション

Menu メニュー

ボタンから開く、操作の一覧。

別名

見分けるポイント

下向き矢印や「⋯」アイコンの付いたボタン。押すと、操作名を縦に並べた小さなパネルが出る。

バリエーション

オーバーフローメニュー
「⋯」アイコンだけのボタンから開くもの。表の行やカードで、追加の操作をしまうのに使う。

挙動

  • メニューを開くと、最初の項目にフォーカスが移る。
  • 項目を選ぶとその操作が実行され、メニューが閉じる。
  • Esc や Tab を押すか、外側をクリックすると、何も実行せずに閉じる。

キーボード操作

キー動作
Enter / Spaceボタンではメニューを開く。項目ではその操作を実行してメニューを閉じる。
↓ボタンではメニューを開いて最初の項目へ。メニュー内では次の項目へ移る。
↑ボタンではメニューを開いて最後の項目へ。メニュー内では前の項目へ移る。
Home / End最初または最後の項目へ移る。
Escメニューを閉じ、ボタンにフォーカスを戻す。
Tabメニューを閉じ、次の要素へ移る。

使い分け・注意点

  • ホバーではなくクリックで開く。
  • パネルはボタンの左端か右端にそろえる。
  • セレクトボックス: メニューは項目を選ぶと操作を実行するが、セレクトは選んだ選択肢をフォームの値として保持する。
  • スプリットボタン: メニューボタンは押してもメニューを開くだけだが、スプリットボタンは主な操作を直接実行できる。
  • ツールバー: メニューは操作を開いたリストにしまい、ツールバーは操作部品を1列に並べて常に見せる。

出典