ヘッダーナビゲーション

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

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

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

設定

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

export const settings = {
  colorScheme: "Dracula",
  siteName: "zudo-doc",
  headerNav: [
    { label: "Docs", path: "/docs" },
    { label: "Blog", path: "/blog" },
    { label: "API", path: "/api" },
  ],
};

各アイテムには以下があります：

• label — ヘッダーに表示されるテキスト
• path — アクティブ状態検出用のURLパスプレフィックス

アクティブ状態

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

モバイル動作

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