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

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

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

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

レスポンシブ・ナビゲーションバー
ナビゲーションバーの様々な配置のバリエーション。

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

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

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

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