## Overview

`CategoryTreeNav` is a server-rendered zudo-react component that displays child pages of a category as a nested tree of links (`ul > li > ul > li` pattern). It is an alternative to `CategoryNav` which uses a card-grid style — `CategoryTreeNav` is more compact and suited to categories with deeper nesting.

[Dynamic content unavailable in text export]

`CategoryTreeNav` is globally available in all MDX doc pages — no import needed. It is registered alongside the admonition components (`Note`, `Tip`, etc.) in the doc page route.



## Live Example

Here is `CategoryTreeNav` rendering the Guides category:

[Dynamic content unavailable in text export]

## Usage

Use `CategoryTreeNav` in a category's `index.mdx` to create a compact tree-style listing:

```mdx
---
title: Getting Started
sidebar_position: 0
---

Welcome to the Getting Started section.

<CategoryTreeNav category="getting-started" />
```

`CategoryTreeNav` renders entirely on the server with zero client-side JavaScript — no hydration directive is needed.

## Comparison with CategoryNav

| Feature | CategoryNav | CategoryTreeNav |
|---------|-------------|-----------------|
| Layout | 2-column card grid | Nested tree list |
| Description | Shown in each card | Shown inline after title |
| Nesting | Flat (children only) | Unlimited (full depth) |
| Best for | Landing pages, overviews | Deep hierarchies, compact listings |

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `category` | `string` | (required) | The category slug (e.g., `"guides"`, `"reference"`) |
| `lang` | `Locale` | auto-detected | Override the locale for the content collection |

The `lang` prop is automatically detected from the current URL path, so you typically don't need to set it.

## Source

The component's rendering logic ships from the package at `@takazudo/zudo-doc/category-tree-nav`, and is wired into every MDX doc page automatically via the package-owned routes (`packageOwnedRoutes`, on by default) — there is no project file to maintain.