ドロワーメニュー
Drawerハンバーガーボタンなどの操作をきっかけに、画面端からスライドして現れ、操作後は隠れるナビゲーションパネルUI。
○ 使う場面
- モバイル幅でナビゲーション項目を隠しておき、必要なときだけ画面全体を使って見せたいとき
- 一時的な設定パネルやフィルターなど、常時は不要だが素早く呼び出したいコンテンツがあるとき
× 避ける場面
- ナビゲーションを常時見せておきたいSaaS管理画面など、広い画面幅があるとき（→サイドバー）
- 画面中央に汎用的なフォームや確認内容を出したいとき（→モーダル）
別名
ドロワー、スライドメニュー、ナビゲーションドロワー、サイドメニュー、オフキャンバスメニュー
近縁種との比較
「ドロワー」は英語で家具の引き出しを意味する言葉で、普段は本体の中にしまわれていて、取っ手（ハンバーガーボタンなど）を引くとスライドして中身が現れるという、引き出しの動きになぞらえた名前である。
| 近縁種 | 違い・使い分け |
|---|---|
| サイドバー | 常時表示され続けるサイドバーに対し、ドロワーメニューはハンバーガーボタン等の操作で出し入れする点が横型スライドパネル系UIの一次的な分岐点になる。 |
| ハンバーガーメニュー | ハンバーガーメニューはこのパネルを開閉するボタン側を指し、ボタンとパネルは対で使われるが本図鑑では別カードとして扱う。 |
| メガメニュー | メガメニューはPC幅では複数カラムの大面積パネルを、モバイル幅ではドロワーメニューに置き換えるレスポンシブな使い分けのペアとして扱われることが多い。 |
| モーダル | モーダルは画面中央に浮かび任意のコンテンツを表示する汎用ダイアログであるのに対し、ドロワーは画面端からスライドし、ナビゲーションや一時的な設定パネルという用途に特化する。 |
| ボトムシート | ボトムシートは画面下端から出る点で画面端（多くは左右）から出るドロワーと表示位置が異なり、ドロワーが主にナビゲーション用途であるのに対しボトムシートはモバイルでのコンテンツ表示や操作選択に用途を絞る。 |
| アクションシート | アクションシートも画面下端から出る操作選択用のオーバーレイで、ナビゲーション用途中心のドロワーとは表示位置・用途の両方で異なる。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション