ヘッダーHeader
Experimental

ロゴ、主要ナビゲーション、右側の操作をページ上部にまとめて表示します。

プレビュー

状態とバリエーション

コンパクト

狭いヘッダーやアプリ内画面では、主要リンクを別ナビゲーションに逃がしてブランドと操作だけにできます。

ドロワーにナビゲーションを格納

タブレットやスマホでは主要リンクをヘッダー上に並べず、右側から開くドロワーにまとめて表示できます。

プロパティ

表は横にスクロールできます
プロパティ初期値説明
Headerheader-ブランド、主要ナビゲーション、操作を横並びにするルート。
HeaderBranddiv-ロゴやサービス名を入れる左側スロット。
HeaderNavLink.activeboolean-現在ページのリンクを強調します。
HeaderActionsdiv-検索、ログイン、テーマ切替などの操作スロット。

使い方

Loading...

使用コンポーネント