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.

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.

Page

A node representing link.

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

Folder

A node containing multiple children nodes.

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

Separator

A label between items.

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

Icons

Icon is a ReactElement, supported by pages and folders.