Page Tree
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.
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
You can import the type definitions of page tree, useful if you want to hardcode or generate it.
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.
Prop
Type
Page
A node representing link.
{
"type": "page",
"name": "Quick Start",
"url": "/docs"
}External urls are also supported
Prop
Type
Folder
A node containing multiple children nodes.
{
"type": "folder",
"name": "Guide",
"index": {
"type": "page",
...
}
"children": [
...
]
}Prop
Type
Separator
A label between items.
{
"type": "separator",
"name": "Components"
}Prop
Type
Icons
Icon is a ReactElement, supported by pages and folders.
How is this guide?
Last updated on