ハンバーガーメニュー
Hamburger menu
別名: 三本線メニュー、ハンバーガーアイコン、Hamburger icon
生態（さわってみる）
一言定義
三本の横線アイコンをクリックすると、隠れていたナビゲーションが開閉するボタン型UI。
分類
使う場面
- モバイル幅でヘッダーの横幅が足りず、ナビゲーション項目を隠したいとき
- ナビゲーション自体より本文コンテンツを優先したい画面
避ける場面
- PC幅で十分な余白があり、主要導線を隠す必要がないとき（→常時表示のナビゲーションバー）
- そのメニューがサイトの主目的そのもの（発見性を最優先すべき導線）であるとき
近縁種との比較
ドロワーメニューはハンバーガーメニューのボタンを押した結果として画面端からスライドして現れる パネル側を指し、ボタンとパネルはセットで語られることが多いが本図鑑では別種として扱う（ボタン＝ ハンバーガーメニュー、パネル＝ドロワーメニュー）。ケバブメニューも同じ「アイコン一つで隠れた 選択肢を開く」という構造だが、開くのはサイト全体のナビゲーションではなく、個々の項目に対する 操作（編集・削除など）のリストである点が異なる。NN/gはハンバーガーメニューについて、発見性の 低下という既知のトレードオフを繰り返し指摘している。
実例リンク
アクセシビリティ
- role
- button（アイコンのみなら aria-label 必須）、aria-expanded で開閉状態、aria-controls で対象パネルを紐付け
- キーボード操作
- Tab で到達、Enter/Space で開閉。開いたパネル内へは通常の Tab 移動
- 補足
- このカード自体は「ボタン」を指す。ボタンが開くスライドパネルの挙動は別カテゴリの「ドロワーメニュー」を参照