CategoryTreeNav
作成2026年3月22日Takeshi Takatsudo
カテゴリインデックスページに子ページのネストされたツリーリンクを表示するAstroコンポーネント。
概要
CategoryTreeNavは、カテゴリの子ページをネストされたツリー形式のリンク（ul > li > ul > liパターン）で表示するAstroコンポーネントです。カードグリッドスタイルのCategoryNavの代替として、より深いネストを持つカテゴリに適したコンパクトな表示を提供します。
ℹ️ Info
CategoryTreeNavはすべてのMDXドキュメントページでグローバルに利用できます — インポートは不要です。アドモニションコンポーネント（Note、Tipなど）と同様に、ドキュメントページルートで登録されています。
ライブデモ
以下はCategoryTreeNavで「ガイド」カテゴリを表示した例です：
使い方
カテゴリのindex.mdxでCategoryTreeNavを使用してコンパクトなツリー形式のリストを作成します：
---
title: Getting Started
sidebar_position: 0
---
Welcome to the Getting Started section.
<CategoryTreeNav category="getting-started" />CategoryTreeNavはAstroコンポーネント（クライアントサイドJavaScriptなし）のため、client:ディレクティブは不要です。
CategoryNavとの比較
| 特徴 | CategoryNav | CategoryTreeNav |
|---|---|---|
| レイアウト | 2カラムカードグリッド | ネストされたツリーリスト |
| 説明文 | 各カード内に表示 | タイトルの後にインラインで表示 |
| ネスト | フラット（子のみ） | 最大3階層まで |
| 最適な用途 | ランディングページ、概要 | 深い階層構造、コンパクトな一覧 |
プロップ
| プロップ | 型 | デフォルト | 説明 |
|---|---|---|---|
category | string | （必須） | カテゴリスラッグ（例："guides"、"reference"） |
lang | Locale | 自動検出 | コンテンツコレクションのロケールを上書き |
langプロップは現在のURLパスから自動的に検出されるため、通常は設定する必要はありません。
ソース
コンポーネントはsrc/components/category-tree-nav.astroに定義されています。