---
title: Page Tree
description: The structure of page tree.
---

Page tree is a tree structure that describes all navigation links, with other items like separator and folders.

It will be sent to the client and being referenced in navigation elements including the sidebar and breadcrumb.
Hence, you shouldn't store any sensitive or large data in page tree.

<Callout title="Note">

By design, page tree only contains necessary information of all pages and folders.

Unserializable data such as functions can't be passed to page tree.

</Callout>

## Conventions

You can import the type definitions of page tree, useful if you want to hardcode or generate it.

```ts
import type * as PageTree from 'fumadocs-core/page-tree';

const tree: PageTree.Root = {
  // props
};
```

Certain nodes contain a `$ref` property, they are internal and not used when hardcoding it.

### Root

The initial root of page trees.

<auto-type-table path="props.ts" name="PageTreeRoot" />

### Page

A node representing link.

```json
{
  "type": "page",
  "name": "Quick Start",
  "url": "/docs"
}
```

> External urls are also supported

<auto-type-table path="props.ts" name="PageTreeItem" />

### Folder

A node containing multiple children nodes.

```json
{
    "type": "folder",
    "name": "Guide",
    "index": {
        "type": "page",
        ...
    }
    "children": [
        ...
    ]
}
```

<auto-type-table path="props.ts" name="PageTreeFolder" />

### Separator

A label between items.

```json
{
  "type": "separator",
  "name": "Components"
}
```

<auto-type-table
  path="props.ts"
  name="PageTreeSeparator"
/>

## Icons

Icon is a `ReactElement`, supported by pages and folders.
