Page Tree

Page tree is a tree that includes all the pages, separator and folders.

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

Note

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

Conventions

Root

The initial root of page trees.

Prop	Type	Default
`name`	`string`	-
`children`	`Node[]`	-

Page

It contains a url, an optional icon and display name.

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

External urls are also supported

Prop	Type	Default
`type`	`"page"`	-
`name`	`string`	-
`url`	`string`	-
`external`	`boolean`	-
`icon`	`ReactElement<any, string \| JSXElementConstructor<any>>`	-

Folder

A folder containing a list of nodes.

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

Prop	Type	Default
`type`	`"folder"`	-
`name`	`string`	-
`root`	`boolean`	-
`defaultOpen`	`boolean`	-
`index`	`Item`	-
`icon`	`ReactElement<any, string \| JSXElementConstructor<any>>`	-
`children`	`Node[]`	-

As Root

To implement multiple page trees, you can add a root property to the folder node. The nearest root folder of current page will be used as the root of page tree.

Separator

A label between items.

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

Prop	Type	Default
`type`	`"separator"`	-
`name`	`string`	-

Icons

Icon is a ReactElement, supported by pages and folders.

Type Bindings

You can import the type from server package.

import type { PageTree } from 'fumadocs-core/server'

const tree: PageTree = ...

On this page