メインコンテンツへスキップ

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

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

幅一杯にナビゲーションバー
幅一杯にナビゲーションバーv5.1.1設定変更

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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