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

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

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

幅一杯にナビゲーションバー
幅一杯にナビゲーションバー

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

サイトの本体と同じ幅のナビゲーションバー
サイトの本体と同じ幅のナビゲーションバー

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

メニューのみがサイトの本体と同じ幅のナビゲーションバー
メニューのみがサイトの本体と同じ幅のナビゲーションバー

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

レスポンシブ・ナビゲーションバー
レスポンシブ・ナビゲーションバー

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

静的トップナビゲーションバー
静的トップナビゲーションバー

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

トップ固定のナビゲーションバー
トップ固定のナビゲーションバー

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

ボトム固定のナビゲーションバー
ボトム固定のナビゲーションバー

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

最上部に達すると固定されるナビゲーションバー
最上部に達すると固定されるナビゲーションバー

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