ケバブメニュー
Kebab menu
別名: 縦三点メニュー、3点リーダーメニュー、ミートボールメニュー、ベントーメニュー、ドネルメニュー、Meatball menu、Bento menu、Döner menu、Three-dot menu、Vertical ellipsis menu
生態(さわってみる)
一言定義
縦に並んだ3つの点のアイコンをクリックすると、対象に対する操作の一覧が展開するメニューUI。
分類
使う場面
- 一覧の行やカードなど、繰り返し要素ごとに個別の操作(編集・複製・削除等)をまとめたいとき
- 常時表示のツールバーに置くには使用頻度が低い操作を隠しておきたいとき
避ける場面
- 操作が1つしかないとき(→単体のボタンで十分)
- 操作の発見性を最優先したいとき(アイコン1つに隠れるため見落とされやすい)
近縁種との比較
縦3点リーダーのアイコンは英語圏で「ケバブ(Kebab)」と呼ばれるが、串に刺さった団子に見立てた俗称は他にもいくつか流通しており、横向きの3点は肉団子に見立てた「ミートボールメニュー」、3×3グリッドのアイコンはお弁当箱に見立てた「ベントーメニュー」、長さの異なる三本線(フィルターアイコン)を指す「ドネルメニュー」と、いずれも食べ物に見立てた俗称である点が共通する。ハンバーガーメニューとは同じ「アイコン一つで隠れた選択肢を開く」構造だが、開くのがサイト全体のナビゲーションか、個々の項目に対する操作かで区別される。ドロップダウンメニュー・コンテキストメニューとはいずれも「クリックで選択肢を展開する」という基本構造を共有するが、ケバブメニューは縦3点という可視のトリガーを常に持つ点で、右クリックがトリガーになるコンテキストメニューと異なり、また常時表示のボタンが起点になるドロップダウンメニューと違って行・カードなど繰り返し要素に対する個別操作という文脈で使われる点が特徴である。
実例リンク
アクセシビリティ
- role
- トリガーはbutton[aria-haspopup="true"][aria-expanded]、展開パネルはrole="menu" + 各項目role="menuitem"
- キーボード操作
- ↑↓で項目移動、Home/Endで先頭・末尾へ、Escで閉じてトリガーへフォーカスを戻す
- 補足
- アイコンのみのトリガーには必ずaria-label(例:「操作メニューを開く」)を付与する。俗称が複数あるため、実装コメントに正式名を残しておくと混乱を避けられる