Navigation Drawer

Navigation Drawer は、モバイルや小型タブレットなどの小さな画面で、Bottom Navigation に収まらない優先順位の低い遷移先を格納するドロワー型のナビゲーションコンポーネントです。普段は非表示で、ユーザーの操作によって展開されます。

1. 概要 (Overview)

説明

Navigation Drawer は Header（オプション）と Body で構成されます。Body に Interactive List を持ち、タップすると Interactive List Item が示す最上位の遷移先に移動します。

Header: アカウント切り替えなどに使用できる柔軟なスペース。
Body: Interactive List を設置して横方向の画面遷移を促します。

ドロワーは画面を覆う Scrim（暗幕）の上に Content として表示されます。

リンク

2. 構成要素 (Anatomy)

アカウント切り替えや閉じる Button など、柔軟に内容を配置できるスペースです。Body のスクロールに対して固定するかどうかを選択できます。

必須/任意: 任意

Body

最上位の遷移先を示す Interactive List を配置します。Drawer の高さよりコンテンツが長い場合は Body 内で垂直方向にスクロールできます。

必須/任意: 必須

Scrim

Drawer の背景に表示する半透明の覆いです。タップで Drawer を閉じます。

必須/任意: 必須（コンポーネント側で自動的に提供）

3. 使い分け (Usage)

いつ使うか

モバイルや小型タブレットなどの小さな画面で、横方向の画面遷移が必要かつ、優先順位が低い遷移先が Bottom Navigation に収まらない場合に使います。

いつ使わないか

モバイルなどの小さな画面で遷移先が5つまでに収まる場合: Bottom Navigation のみを使います。
デスクトップや大型タブレットの場合: アプリケーションのどこからでもアクセスできる必要がある最上位の遷移先が3つ以上あるなら、Side Navigation を使います。

類似コンポーネントとの違い

Side Navigation: 大きな画面で常時表示するナビゲーション。Navigation Drawer は小さな画面でユーザー操作により展開する点が異なります。
Bottom Navigation: モバイルで上位5つの遷移先を画面下部に常時表示する。Navigation Drawer はそれに収まらない遷移先を格納します。

4. バリエーション (Variants)

Layer

Drawer の重ね順を指定できます。複数のオーバーレイ UI を同時に扱う際に、表示順序を制御するためのオプションです。

	Modifier class
Layer 1*	`.-layer-1`
Layer 2	`.-layer-2`
Layer 3	`.-layer-3`

実装

Mixin-based

HTML

<div class="navigation-drawer-component --activated">
  <div class="_scrim"></div>
  <div class="_content">
    <div class="_header">
      <!-- ヘッダー領域（閉じるボタン、アカウント情報など） -->
    </div>
    <div class="_body">
      <!-- Interactive List をここに配置 -->
    </div>
  </div>
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

.navigation-drawer-component {
  @include inhouse.navigation-drawer-style(
    $option: (
      layer: 1,
    )
  );
}

Class-based

HTML

<div class="in-navigation-drawer -layer-1 --activated">
  <div class="_scrim"></div>
  <div class="_content">
    <div class="_header"></div>
    <div class="_body"></div>
  </div>
</div>

SCSS

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.navigation-drawer-export;

5. ステート (States)

Body 内部の Interactive List のステートは Interactive List に準じます。

Default

Navigation Drawer が非表示の状態です。

Activated

Navigation Drawer が展開され、Scrim と Content が表示されている状態です。--activated クラスで切り替えます。Scrim をタップすると非表示の状態に戻ります。

6. アクセシビリティ (Accessibility)

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。

ルート要素に <nav> を用い、aria-label で「メニュー」などの役割を伝えるラベルを設定する
開閉状態を aria-expanded で伝え、開閉操作を行う Button と aria-controls で関連付ける
展開時はフォーカスを Drawer 内に閉じ込め（フォーカストラップ）、Escape キーで閉じられるようにする
状態に応じて Interactive List の Item を削除したり Disabled にしない（一貫性を保ち、遷移先にコンテンツがない場合は Empty State で対応する）

7. ライティング (Writing)

Item のラベルは画面の内容を端的に表す短い名詞を使う
Item のラベルは画面遷移先のページ見出しと揃え、認識のずれを起こさない
Drawer 上部の閉じる Button には aria-label="閉じる" を設定する