NavigationRailナビゲーションレール

ナビゲーションレールは、タブレットやデスクトップコンピューターで異なるメインページにアクセスする方法を提供します。

使用方法

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

import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';

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

import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';

使用例：（例中の style="position: relative" はデモンストレーションの必要性によるもので、実際の使用時はこのスタイルを削除してください。）

Recent

Images

Library

<mdui-navigation-rail value="recent" style="position: relative">
  <mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recent</mdui-navigation-rail-item>
  <mdui-navigation-rail-item icon="image--outlined" value="images">Images</mdui-navigation-rail-item>
  <mdui-navigation-rail-item icon="library_music--outlined" value="library">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>

注意事項：

このコンポーネントはデフォルトで position: fixed を使用し、自動的に body に padding-left または padding-right スタイルを追加して、ページコンテンツがこのコンポーネントに隠れないようにします。

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

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

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

Recent

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

右側に配置

<mdui-navigation-rail> コンポーネントに placement 属性を right に設定すると、ナビゲーションレールを右側に表示できます。

Recent

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail placement="right" contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

区切り線の表示

<mdui-navigation-rail> コンポーネントに divider 属性を追加すると、ナビゲーションレールに区切り線を追加して、ページコンテンツと区別できます。

Recent

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail divider contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

上部/下部に要素を追加

<mdui-navigation-rail> コンポーネント内で top、bottom スロットを使用して、上部と下部に要素を追加できます。

Recent

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
    <mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
    <mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>

    <mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 600px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

ナビゲーション項目の垂直方向の配置

<mdui-navigation-rail> コンポーネントの alignment 属性を設定することで、ナビゲーション項目の垂直方向の配置を変更できます。

Recent

Images

Library

start

center

end

<div class="example-alignment" style="position: relative">
  <mdui-navigation-rail alignment="start" contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 360px;overflow: auto">
    <mdui-segmented-button-group value="start" selects="single">
      <mdui-segmented-button value="start">start</mdui-segmented-button>
      <mdui-segmented-button value="center">center</mdui-segmented-button>
      <mdui-segmented-button value="end">end</mdui-segmented-button>
    </mdui-segmented-button-group>
  </div>
</div>

<script>
  const example = document.querySelector(".example-alignment");
  const navigationRail = example.querySelector("mdui-navigation-rail");
  const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");

  segmentedButtonGroup.addEventListener("change", (event) => {
    navigationRail.alignment = event.target.value;
  });
</script>

ソース

アイコン

<mdui-navigation-rail-item> コンポーネントでは、icon 属性を使用して未アクティブ状態のナビゲーション項目アイコンを設定し、active-icon 属性を使用してアクティブ状態のナビゲーション項目アイコンを設定できます。また、icon と active-icon スロットを使用して未アクティブ状態とアクティブ状態のアイコン要素を設定することもできます。

Recent

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item>
      Library
      <mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
      <mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
    </mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

アイコンのみ使用

<mdui-navigation-rail-item> コンポーネントはテキストを追加せず、アイコンのみで使用できます。

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

リンク

<mdui-navigation-rail-item> コンポーネントに href 属性を設定すると、ナビゲーション項目をリンクにできます。この場合、リンク関連の属性 download、target、rel も使用できます。

Recent

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail divider contained>
    <mdui-navigation-rail-item
      href="https://www.mdui.org"
      target="_blank"
      icon="watch_later--outlined"
    >Recent</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

バッジ

<mdui-navigation-rail-item> コンポーネントでは、badge スロットを使用してバッジを追加できます。

Recent 99+

Images

Library

ページコンテンツ

<div style="position: relative">
  <mdui-navigation-rail contained>
    <mdui-navigation-rail-item icon="watch_later--outlined">
      Recent
      <mdui-badge slot="badge">99+</mdui-badge>
    </mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
    <mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
  </mdui-navigation-rail>

  <div style="height: 260px;overflow: auto">
    <div style="height: 1000px">ページコンテンツ</div>
  </div>
</div>

ソース

HTML 属性	JavaScript プロパティ	型	デフォルト値
`icon`	`icon`	`string`	-
非アクティブ状態のMaterial Iconsアイコン名です。`slot="icon"` で設定することもできます。
`active-icon`	`activeIcon`	`string`	-
アクティブ状態のMaterial Iconsアイコン名です。`slot="active-icon"` で設定することもできます。
`value`	`value`	`string`	-
ナビゲーションアイテムの値です。
`href`	`href`	`string`	-
リンク先のURLです。この属性を設定すると、コンポーネント内部は `<a>` 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
`download`	`download`	`string`	-
ダウンロードリンクの対象ファイル名です。注：`href` 属性が設定されている場合にのみ有効です。
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
リンクの開き方です。次の値を指定します： `_blank`：新しいウィンドウで開く `_parent`：親フレームで開く `_self`：デフォルト。現在のフレームで開く `_top`：最上位のウィンドウで開く注：`href` 属性が設定されている場合にのみ有効です。
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
現在のドキュメントとリンク先ドキュメントの関係です。次の値を指定します： `alternate`：現在のドキュメントの代替バージョン `author`：現在のドキュメントまたは記事の作成者 `bookmark`：直近の祖先セクションへのパーマリンク `external`：参照先ドキュメントが現在のサイトとは異なるサイトにあることを示します `help`：関連するヘルプドキュメントへのリンク `license`：現在のドキュメントのメインコンテンツが、参照先ファイルの著作権ライセンスの対象であることを示します `me`：現在のドキュメントがリンク先コンテンツの所有者を表します `next`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの次のドキュメントです `nofollow`：現在のドキュメントの作成者または発行者が、参照先ファイルを推奨していないことを示します `noreferrer`：`Referer` ヘッダーを含めません。`noopener` と同様の効果です `opener`：ハイパーリンクが最上位のブラウジングコンテキストを作成する場合（つまり `target` 属性値が `_blank`）、補助ブラウジングコンテキストを作成します `prev`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの前のドキュメントです `search`：現在のファイルとその関連ページを検索するために使用できるリソースへのリンクを提供します `tag`：現在のドキュメントに適用されるタグ（指定されたアドレスで識別される）を提供します注：`href` 属性が指定されている場合にのみ使用できます。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

名前	パラメーター	戻り値
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。

名前
デフォルト
テキストコンテンツ
`icon`
アイコン
`active-icon`
アクティブ状態のアイコン
`badge`
バッジ

名前
`container`
ナビゲーションアイテムコンテナ
`indicator`
インジケーター
`badge`
バッジ
`icon`
アイコン
`active-icon`
アクティブ状態のアイコン
`label`
テキストコンテンツ

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

HTML 属性	JavaScript プロパティ	型	デフォルト値
`value`	`value`	`string`	-
現在選択されている `<mdui-navigation-rail-item>` の値です。
`placement`	`placement`	`'left' \| 'right'`	`'left'`
ナビゲーションレールの配置位置です。次の値を指定します： `left`：左側 `right`：右側
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'start'`
`<mdui-navigation-rail-item>` 要素の配置方法です。次の値を指定します： `start`：上揃え `center`：中央揃え `end`：下揃え
`contained`	`contained`	`boolean`	`false`
デフォルトでは、ナビゲーションレールは `body` 要素に対して表示されます。この属性を `true` に設定すると、ナビゲーションレールはその親要素に対して表示されます。注：この属性を設定する場合、親要素に手動でスタイル `position: relative;` を設定する必要があります。
`divider`	`divider`	`boolean`	`false`
ナビゲーションレールとページコンテンツの間に区切り線を追加するかどうかを指定します。
`order`	`order`	`number`	-
`<mdui-layout>`内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは `0` です。

名前
`change`
値が変化したときに発生します。

名前
デフォルト
`<mdui-navigation-rail-item>` コンポーネント
`top`
上部の要素
`bottom`
下部の要素

名前
`top`
上部要素のコンテナ
`bottom`
下部要素のコンテナ
`items`
`<mdui-navigation-rail-item>` コンポーネントのコンテナ

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

前の章

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

次の章

Radio ラジオボタン

NavigationRailナビゲーションレール

使用方法

例

指定されたコンテナ内に配置

右側に配置

区切り線の表示

上部/下部に要素を追加

ナビゲーション項目の垂直方向の配置

アイコン

アイコンのみ使用

リンク

バッジ

`mdui-navigation-rail-item` API

プロパティ

メソッド

イベント

Slots

CSS Parts

CSS カスタムプロパティ

`mdui-navigation-rail` API

プロパティ

イベント

Slots

CSS Parts

CSS カスタムプロパティ