CategoryTreeNav
作成 2026年3月16日更新 2026年6月7日Takeshi Takatsudo
カテゴリインデックスページに子ページのネストされたツリーリンクを表示する、サーバーレンダリングのPreactコンポーネント。
概要
CategoryTreeNavは、カテゴリの子ページをネストされたツリー形式のリンク（ul > li > ul > liパターン）で表示する、サーバーレンダリングのPreactコンポーネントです。カードグリッドスタイルの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は完全にサーバー側でレンダリングされ、クライアントサイドJavaScriptはゼロです — ハイドレートディレクティブは不要です。
CategoryNavとの比較
| 特徴 | CategoryNav | CategoryTreeNav |
|---|---|---|
| レイアウト | 2カラムカードグリッド | ネストされたツリーリスト |
| 説明文 | 各カード内に表示 | タイトルの後にインラインで表示 |
| ネスト | フラット（子のみ） | 無制限（maxDepth のデフォルトは Infinity） |
| 最適な用途 | ランディングページ、概要 | 深い階層構造、コンパクトな一覧 |
プロップ
| プロップ | 型 | デフォルト | 説明 |
|---|---|---|---|
category | string | （必須） | カテゴリスラッグ（例："guides"、"reference"） |
lang | Locale | 自動検出 | コンテンツコレクションのロケールを上書き |
langプロップは現在のURLパスから自動的に検出されるため、通常は設定する必要はありません。
ソース
コンポーネントはpages/に定義されています。
Revision History
Takeshi Takatsudo作成: 2026-03-16T22:41:53+09:00更新: 2026-06-07T16:19:05+09:00