ヘッダーナビゲーション

ヘッダーのトップレベルナビゲーションタブの設定

zudo-docはDocusaurusにインスパイアされた3レベルのナビゲーション階層をサポートしています：

• ヘッダーナビゲーション — サイトヘッダーのトップレベルタブ（最大カテゴリ）
• サイドバーカテゴリ — サイドバーの折りたたみ可能なグループ（第2レベル）
• サイドバーアイテム — カテゴリ内の個別ページ（第3レベル）

設定

src/config/settings.tsでヘッダーナビゲーションアイテムを定義します：

export const settings = {
  // ...
  headerNav: [
    { label: "Getting Started", labelKey: "nav.gettingStarted", path: "/docs/getting-started", categoryMatch: "getting-started" },
    { label: "Guides", labelKey: "nav.guides", path: "/docs/guides", categoryMatch: "guides" },
    { label: "Reference", labelKey: "nav.reference", path: "/docs/reference", categoryMatch: "reference" },
  ],
};

各アイテムは以下のプロパティをサポートします：

labelKey

labelKeyプロパティはヘッダーナビゲーションラベルのローカライズを可能にします。設定すると、zudo-docは現在のロケールの翻訳ファイルでキーを検索し、翻訳された文字列をlabelの代わりに使用します。翻訳が見つからない場合はlabelがフォールバックとして使用されます。

翻訳キーはnav.*名前空間規約に従います（例："nav.gettingStarted"、"nav.guides"）。

categoryMatch

categoryMatchプロパティはヘッダータブを特定のサイドバーカテゴリに接続します。categoryMatchを持つヘッダータブがアクティブな場合、サイドバーはそのカテゴリ内のページのみを表示するようにフィルタリングされます。

例えば、categoryMatch: "guides"はタブをguides/コンテンツディレクトリにリンクします。ユーザーが/docs/guides/配下のページに移動すると、「Guides」タブがアクティブになり、サイドバーにはguidesカテゴリのみが表示されます。

アクティブ状態

現在のページURLがアイテムのpathで始まる場合、そのヘッダーナビゲーションアイテムがアクティブとみなされます。例えば、/docs/guides/configurationにアクセスすると、URLが/docs/guidesで始まるため「Guides」タブがアクティブになります。

モバイル動作

小さな画面（< 640px）では、スペースを節約するためにヘッダーナビゲーションアイテムは非表示になります。モバイルではサイドバートグルですべてのナビゲーションにアクセスできます。