メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

実例:ナビゲーションバー

ナビゲーションバーコンポーネントのすべてのレスポンシブとコンテナオプションのデモ。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
幅一杯にナビゲーションバー
幅一杯にナビゲーションバーv5.3.1設定変更

メニューがビューポートの両端に広がったナビゲーションバーの実例。

メニューのみがサイトの本体と同じ幅のナビゲーションバー
メニューのみがサイトの本体と同じ幅のナビゲーションバーv5.3.1設定変更

サイトの本体の両端と揃ったナビゲーションバーの実例。

サイトの本体と同じ幅のナビゲーションバー
サイトの本体と同じ幅のナビゲーションバーv5.3.1設定変更

メニュー部分のみがサイトの本体の両端と揃ったナビゲーションバーの実例。

レスポンシブ・コンテナを使用したナビゲーションバー
レスポンシブ・コンテナを使用したナビゲーションバーv5.0.0新設 v5.3.1設定変更

ビューポートサイズに応じて両端の位置が変化するナビゲーションバーの実例。

レスポンシブ・ナビゲーションバー
レスポンシブ・ナビゲーションバーv5.2.3一部追加 v5.3.1設定変更

ナビゲーションバーの様々な配置のバリエーション。

オフキャンバス付きナビゲーションバー
オフキャンバス付きナビゲーションバーv5.2.0新設 v5.3.0設定変更

オフキャンバスコンポーネントを使用したナビゲーションバーの実例。

静的トップナビゲーションバー
静的トップナビゲーションバーv5.3.1設定変更

いくつかの追加コンテンツを持つ単一の静的なナビゲーションバーの実例。

トップ固定のナビゲーションバー
トップ固定のナビゲーションバーv5.3.1設定変更

いくつかの追加コンテンツを持つ固定されたトップナビゲーションバーの実例。

ボトム固定のナビゲーションバー
ボトム固定のナビゲーションバーv5.3.1設定変更

いくつかの追加コンテンツを持つ固定されたボトムナビゲーションバーの実例。

最上部に達すると固定されるナビゲーションバー
最上部に達すると固定されるナビゲーションバーv5.3.1設定変更

スクロールして最上部に達すると最上部に固定されるナビゲーションバーの実例。

最下部に達するまで固定されるナビゲーションバー
最下部に達するまで固定されるナビゲーションバーv5.2.0新設 v5.3.1設定変更

スクロールして最下部に達するまで最下部に固定されるナビゲーションバーの実例。

オフキャンバスナビゲーションバー
オフキャンバスナビゲーションバーv5.0.0カテゴリ変更 v5.3.0設定変更

拡張可能なナビゲーションバーをスライドオフキャンバスメニューに変更(オフキャンバスコンポーネントは不使用)。