サイドバー

作成 2026年3月11日更新 2026年6月7日Takeshi Takatsudo

サイドバーナビゲーションの構造と設定方法。

アイテムの並び順

カテゴリ内のページはsidebar_positionフロントマターフィールドでソートされます。小さい値ほど先に表示されます。

sidebar_positionがないページはデフォルト値999が適用され、カテゴリの末尾にファイル名のアルファベット順で表示されます。

---
title: My Page
sidebar_position: 3
---

Tip

ページの順序を制御するために、sidebar_positionを常に明示的に設定してください。設定しないとページはアルファベット順にソートされ、意図した読み順と一致しない場合があります。

カテゴリの並び順

サイドバー内のカテゴリはインデックスページ（index.mdx）のsidebar_positionで順序付けされます。カテゴリにインデックスページがない場合やsidebar_positionがない場合は、アルファベット順にフォールバックします。

例えば、「Getting Started」を最初に、「Guides」を2番目にするには：

getting-started/index.mdx  → sidebar_position: 0
guides/index.mdx            → sidebar_position: 1
reference/index.mdx         → sidebar_position: 2

カテゴリインデックスページ

ディレクトリ内にindex.mdxを作成すると、カテゴリにランディングページが付与されます。サイドバーのカテゴリ名がこのページへのクリック可能なリンクになります。

一般的なカテゴリインデックスページでは<CategoryNav />コンポーネントを使用して、カテゴリ内のすべてのページを自動的にリスト表示します：

---
title: Guides
sidebar_position: 1
---

Explore our guides to learn about zudo-doc features.

<CategoryNav category="guides" />

<CategoryNav />コンポーネントは、カテゴリ内のすべてのページ（インデックス自体を除く）へのリンクのグリッドをsidebar_positionでソートしてレンダリングします。

index.mdxがない場合、カテゴリの見出しはトグル専用のコントロールになります — クリックするとカテゴリの展開・折りたたみが行われますが、ページへのナビゲーションは行われません。

デフォルトの展開・折りたたみ

現在のページが含まれるカテゴリは自動的に展開されます。それ以外のカテゴリはデフォルトで折りたたまれます。

サイドバーラベル

sidebar_labelフロントマターフィールドを使用して、ページタイトルとは異なるラベルをサイドバーに表示できます。完全なタイトルがサイドバーには長すぎる場合に便利です。

---
title: Getting Started with zudo-doc Installation
sidebar_label: Installation
sidebar_position: 2
---

Tip

sidebar_labelはサイドバーにのみ影響します。ページタイトルと見出しには引き続きtitleが使用されます。

ディレクトリ構造

src/content/docs/内のディレクトリがサイドバーカテゴリになります。ディレクトリ名はkebab-caseからTitle Caseに自動的に変換されます。

src/content/docs/
  getting-started/         → "Getting Started"
    index.mdx              → カテゴリインデックス (sidebar_position: 0)
    introduction.mdx       → sidebar_position: 1
    installation.mdx       → sidebar_position: 2
    writing-docs.mdx       → sidebar_position: 3
  guides/                  → "Guides"
    index.mdx              → カテゴリインデックス (sidebar_position: 1)
    configuration.mdx      → sidebar_position: 1
    frontmatter.mdx        → sidebar_position: 2

ネストカテゴリ（サブグループ）

カテゴリディレクトリ内にサブディレクトリを作成すると、サイドバーにネストされた折りたたみグループが生成されます。各サブディレクトリには category_no_page: true を含む index.mdx ファイルが必要です：

src/content/docs/
  methodology/
    index.mdx
    architecture/
      index.mdx             → title: Architecture, sidebar_position: 1, category_no_page: true
      bem-strategy.mdx
      component-first.mdx
    design-systems/
      index.mdx             → title: Design Systems, sidebar_position: 2, category_no_page: true
      tight-token.mdx
      two-tier-size.mdx

自動生成サイドバーでは 3レベルの深さ で表示されます：

Methodology            (depth 0)
  ▸ Architecture       (depth 1, 折りたたみ可能)
    BEM Strategy       (depth 2)
    Component First    (depth 2)
  ▸ Design Systems     (depth 1, 折りたたみ可能)
    Tight Token        (depth 2)
    Two-Tier Size      (depth 2)

明示的サイドバー設定によるフラット化

より読みやすくするため、src/config/sidebars.ts で明示的なサイドバー設定を使用してサブグループをトップレベルに昇格できます。ネストが1レベル減少します：

src/config/sidebars.ts

const sidebars: SidebarsConfig = {
  methodology: [
    "methodology",
    {
      type: "category",
      label: "Architecture",
      items: [{ type: "autogenerated", dirName: "methodology/architecture" }],
    },
    {
      type: "category",
      label: "Design Systems",
      items: [{ type: "autogenerated", dirName: "methodology/design-systems" }],
    },
  ],
};

2レベル で表示されます：

Methodology            (depth 0, リーフリンク)
▸ Architecture         (depth 0, 折りたたみ可能)
  BEM Strategy         (depth 1)
  Component First      (depth 1)
▸ Design Systems       (depth 0, 折りたたみ可能)
  Tight Token          (depth 1)
  Two-Tier Size        (depth 1)

ポイント：

文字列 "methodology" はカテゴリインデックスページを リーフリンク として参照します（子要素は自動的に除去され、明示的な設定が構造を制御します）
type: "autogenerated" と dirName で特定のサブディレクトリから記事を取得します
サブグループカテゴリは depth 0 で太字ラベルとボーダー区切り付きで表示されます
記事は depth 1 で表示され、自動生成より1レベルフラットになります

Tip

カテゴリにサブグループがある場合はこのパターンを推奨します。明示的な設定によりファイルシステムの整理を維持しつつ、サイドバーの可読性が向上します。

ソート順（昇順・降順）

デフォルトでは、カテゴリ内のアイテムは昇順（sidebar_positionが小さい順、次にアルファベット順）でソートされます。カテゴリの index.mdx の category_sort_order フロントマターフィールドを使用してカテゴリごとに降順に変更できます：

changelog/index.mdx

---
title: Changelog
sidebar_position: 10
category_sort_order: "desc"
---

category_sort_orderが"desc"の場合、アイテムは逆順でソートされます — positionが大きい順、次に逆アルファベット順。これは日付ベースのコンテンツ（変更履歴、リリースノート）で、最新のアイテムを上部に表示したい場合に便利です。

Note

_category_.json は引き続き動作しますが、zfb のビルド警告が発生します。新しいカテゴリには index.mdx のフロントマターを使用してください。

src/config/sidebars.tsでも手動サイドバー設定でsortOrderを設定できます：

{
  type: "category",
  label: "Releases",
  sortOrder: "desc",
  items: [
    { type: "autogenerated" },
  ],
}

Tip

変更履歴スタイルのカテゴリでは、sortOrder: "desc"と日付プレフィックスのファイル名（例：2026-03-10-release.mdx）を組み合わせることで、sidebar_positionを手動設定しなくても自動的に最新順に並べられます。

並び順の推奨事項

予測可能な順序のためにすべてのページにsidebar_positionを設定する
カテゴリインデックスページにはsidebar_position: 0を使用する
各カテゴリ内のページには連番（1, 2, 3...）を使用する
後でページを挿入する予定がある場合は番号に間隔を空ける（例：10, 20, 30）
最新順のカテゴリにはindex.mdxでcategory_sort_order: "desc"を使用する

GitHub でソースを見る