Fumadocs

Page Tree

The structure of 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 navigation elements including the sidebar and 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

This is the definitions of Page Tree, you may refer to Page Conventions to learn how to structure your folders/pages.

Root

The initial root of page trees.

PropTypeDefault
name
ReactNode
-
children
Node[]
-

Page

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

External urls are also supported

PropTypeDefault
type
"page"
-
name
ReactNode
-
url
string
-
external
boolean
-
icon
ReactElement<any, string | JSXElementConstructor<any>>
-

Folder

{
    "type": "folder",
    "name": "Guide",
    "index": {
        "type": "page",
        ...
    }
    "children": [
        ...
    ]
}
PropTypeDefault
id
string
-
type
"folder"
-
name
ReactNode
-
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. This will mark the folder as a root folder, and the nearest root folder of current page will be used as the root of page tree. Instead of showing the entire page tree, navigation elements will be restricted within the current root.

Separator

A label between items.

{
  "type": "separator",
  "name": "Components"
}
PropTypeDefault
type
"separator"
-
name
ReactNode
-

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 = ...

Last updated on

On this page

Edit on GitHub