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

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

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

※v5.2.0-beta1はプレリリースのため、"v5.2.0"での変更は再変更される可能性があります。
幅一杯にナビゲーションバー
幅一杯にナビゲーションバーv5.2.0設定変更

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

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

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

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

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

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

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

レスポンシブ・ナビゲーションバー
レスポンシブ・ナビゲーションバーv5.0.0-alpha1一部追加 v5.2.0設定変更

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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