ドロワーメニュー

Drawer

別名: ドロワー、スライドメニュー、ナビゲーションドロワー、サイドメニュー、オフキャンバスメニュー、Navigation drawer、Off-canvas menu、Side drawer

生態(さわってみる)

一言定義

ハンバーガーボタンなどの操作をきっかけに、画面端からスライドして現れ、操作後は隠れるナビゲーションパネルUI。

分類

使う場面

  • モバイル幅でナビゲーション項目を隠しておき、必要なときだけ画面全体を使って見せたいとき
  • 一時的な設定パネルやフィルターなど、常時は不要だが素早く呼び出したいコンテンツがあるとき

避ける場面

  • ナビゲーションを常時見せておきたいSaaS管理画面など、広い画面幅があるとき(→サイドバー)
  • 画面中央に汎用的なフォームや確認内容を出したいとき(→モーダル)

近縁種との比較

「常時表示か、出し入れして使うか」が横型スライドパネル系UIの一次的な分岐点で、本図鑑では常時表示され続けるサイドバーと、ハンバーガーボタン等の操作で出し入れするドロワーメニューを明確に区別する。ハンバーガーメニューはこのパネルを開閉するボタン側を指し、ボタンとパネルは対で使われるが本図鑑では別カードとして扱う。メガメニューとはPC幅では複数カラムの大面積パネルを、モバイル幅ではドロワーメニューに置き換えるレスポンシブな使い分けのペアとして扱われることが多い。**モーダル(ダイアログ)**も同じオーバーレイ層のUIだが、画面中央に浮かび任意のコンテンツを表示する汎用ダイアログであるのに対し、ドロワーは画面端からスライドし、ナビゲーションや一時的な設定パネルという用途に特化する点で異なる。ボトムシートアクションシートは同じ「操作をきっかけに出し入れするオーバーレイ」という点は共通するが、両者は画面下端から出る点、ドロワーは画面端(多くは左右)から出る点で表示位置が異なり、ドロワーが主にナビゲーション用途であるのに対しボトムシート/アクションシートはモバイルでのコンテンツ表示や操作選択に用途を絞る。

実例リンク

アクセシビリティ

role
トリガーは button[aria-expanded][aria-controls]。パネルは role="dialog" + aria-modal="true"(ネイティブ<dialog>のshowModal()を使えば自動的に付与される)
キーボード操作
Escでパネルを閉じてトリガーへフォーカスを戻す。開いた瞬間にパネル内の最初のフォーカス可能要素へフォーカスが移り、Tabはパネル内に閉じ込められる(フォーカストラップ)
補足
背景(スクリム)をクリックしても閉じられるようにする。閉じた後にトリガーボタンへフォーカスを戻すのを忘れない