NavigationDrawerナビゲーションドロワー

ナビゲーションドロワーは、ページのサイドにナビゲーション機能を提供し、ユーザーがさまざまなページやコンテンツにすばやくアクセスできるようにします。

通常、ナビゲーションドロワー内で <mdui-list> コンポーネントを使用してナビゲーション項目を追加できます。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/navigation-drawer.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

使用例：

ナビゲーションドロワーを閉じる

ナビゲーションドロワーを開く

<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>ナビゲーションドロワーを閉じる</mdui-button>
</mdui-navigation-drawer>

<mdui-button>ナビゲーションドロワーを開く</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

注意事項：

このコンポーネントはデフォルトで position: fixed を使用します。

modal 属性が false で、かつブレークポイントが --mdui-breakpoint-md 以上の場合、自動的に body に padding-left または padding-right スタイルを追加して、ページコンテンツがこのコンポーネントに隠れないようにします。

ただし、以下の 2 つの場合はデフォルトで position: absolute を使用します：

contained 属性が true の場合。
コンポーネントが <mdui-layout></mdui-layout> 内にある場合。この場合、padding-left または padding-right スタイルは追加されません。

デフォルトでは、ナビゲーションドロワーは現在のウィンドウを基準にしてページの左側または右側に表示されます。ナビゲーションドロワーを指定されたコンテナ内に配置したい場合は、contained 属性を追加します。この場合、ナビゲーションドロワーは親要素を基準にして表示されます（親要素にスタイル position: relative; overflow: hidden; を自分で追加する必要があります）。

ナビゲーションドロワーを閉じる

ナビゲーションドロワーを開く

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">ナビゲーションドロワーを閉じる</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">ナビゲーションドロワーを開く</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

ソース

modal 属性を追加すると、ナビゲーションドロワーを開いた時にオーバーレイレイヤーを表示できます。ウィンドウまたは親要素の幅が --mdui-breakpoint-md 未満の場合は、このパラメータに関係なく、常にオーバーレイレイヤーが表示されることに注意してください。

close-on-esc 属性を追加すると、ESC キーを押した時にナビゲーションドロワーを閉じることができます。

close-on-overlay-click 属性を追加すると、オーバーレイレイヤーをクリックした時にナビゲーションドロワーを閉じることができます。

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">ナビゲーションドロワーを閉じる</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">ナビゲーションドロワーを開く</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

ソース

右側に配置

placement 属性を right に設定すると、ナビゲーションドロワーをページの右側に表示できます。

ナビゲーションドロワーを閉じる

ナビゲーションドロワーを開く

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">ナビゲーションドロワーを閉じる</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">ナビゲーションドロワーを開く</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`open`	`open`	`boolean`	`false`
ナビゲーションドロワーを開くかどうかを指定します。
`modal`	`modal`	`boolean`	`false`
ナビゲーションドロワーを開くときにオーバーレイを表示するかどうかを指定します。画面幅が狭いデバイス（画面幅が `--mdui-breakpoint-md` 未満）では、このパラメータに関係なく常にオーバーレイが表示されます。
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
オーバーレイがある場合、ESCキーを押してナビゲーションドロワーを閉じるかどうかを指定します。
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
オーバーレイをクリックしたときに、ナビゲーションドロワーを閉じるかどうかを指定します。
`placement`	`placement`	`'left' \| 'right'`	`'left'`
ナビゲーションドロワーの配置位置です。次の値を指定します： `left`：左側 `right`：右側
`contained`	`contained`	`boolean`	`false`
デフォルトでは、ナビゲーションドロワーは `body` 要素に対して表示されます。この属性を `true` に設定すると、ナビゲーションドロワーはその親要素に対して表示されます。注：この属性を設定する場合、親要素に手動でスタイル `position: relative; overflow: hidden;` を設定する必要があります。
`order`	`order`	`number`	-
`<mdui-layout>`内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは `0` です。

イベント

名前
`open`
ナビゲーションドロワーが開く前に発生します。`event.preventDefault()` を呼び出すことで、ナビゲーションドロワーが開くのを防ぐことができます。
`opened`
ナビゲーションドロワーのオープンアニメーションが完了した後に発生します。
`close`
ナビゲーションドロワーが閉じる前に発生します。`event.preventDefault()` を呼び出すことで、ナビゲーションドロワーが閉じるのを防ぐことができます。
`closed`
ナビゲーションドロワーのクローズアニメーションが完了した後に発生します。
`overlay-click`
オーバーレイがクリックされたときに発生します。

Slots

名前
デフォルト
ナビゲーションドロワー内のコンテンツ

CSS Parts

名前
`overlay`
オーバーレイ
`panel`
ナビゲーションドロワーコンテナ

CSS カスタムプロパティ

名前
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--z-index`
コンポーネントのCSS `z-index` 値

前の章

NavigationBar ボトムナビゲーションバー

次の章

NavigationRail ナビゲーションレール