ケバブメニュー

Kebab menu

別名: 縦三点メニュー、3点リーダーメニュー、ミートボールメニュー、ベントーメニュー、ドネルメニュー、Meatball menu、Bento menu、Döner menu、Three-dot menu、Vertical ellipsis menu

生態(さわってみる)

週末の富士登山レポート

同じ役割の俗称いろいろ

  • ケバブ(縦3点)
  • ミートボール(横3点)
  • ベントー(3×3グリッド)
  • ドネル(長さ違い三本線)

一言定義

縦に並んだ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(例:「操作メニューを開く」)を付与する。俗称が複数あるため、実装コメントに正式名を残しておくと混乱を避けられる