ハンバーガーメニュー

Hamburger menu

三本の横線アイコンをクリックすると、隠れていたナビゲーションが開閉するボタン型UI。

○ 使う場面

  • モバイル幅でヘッダーの横幅が足りず、ナビゲーション項目を隠したいとき
  • ナビゲーション自体より本文コンテンツを優先したい画面

× 避ける場面

  • PC幅で十分な余白があり、主要導線を隠す必要がないとき(→常時表示のナビゲーションバー)
  • そのメニューがサイトの主目的そのもの(発見性を最優先すべき導線)であるとき

別名

三本線メニュー、ハンバーガーアイコン

近縁種との比較

三本の横線を、パンでパティを挟んだハンバーガーの断面に見立てたのが名前の由来とされる。NN/gはハンバーガーメニューについて、発見性の低下という既知のトレードオフを繰り返し指摘している。

近縁種違い・使い分け
ドロワーメニュードロワーメニューはハンバーガーメニューのボタンを押した結果として画面端からスライドして現れるパネル側を指し、ボタンとパネルはセットで語られることが多いが本図鑑では別種として扱う(ボタン=ハンバーガーメニュー、パネル=ドロワーメニュー)。
ケバブメニューケバブメニューも同じ「アイコン一つで隠れた選択肢を開く」という構造だが、開くのはサイト全体のナビゲーションではなく、個々の項目に対する操作(編集・削除など)のリストである点が異なる。

分類

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