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.

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.

Conventions

The type definitions of page tree, for people who want to hardcode/generate it. You can also import the type from Fumadocs.

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

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.

Prop	Type	Default
`children`	`Node[]`	-
`name`	`ReactNode`	-
`$id?`	`string`	-

Page

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

External urls are also supported

Prop	Type	Default
`icon?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`description?`	`ReactNode`	-
`external?`	`boolean`	-
`url`	`string`	-
`name`	`ReactNode`	-
`type`	`"page"`	-
`$id?`	`string`	-

Folder

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

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

Separator

A label between items.

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

Prop	Type	Default
`icon?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`name?`	`ReactNode`	-
`type`	`"separator"`	-
`$id?`	`string`	-

Icons

Icon is a ReactElement, supported by pages and folders.