Page Tree
The structure of page tree.
Page tree a tree structure that describes all the navigation links related to the docs, with 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
This is the definitions of Page Tree, you may refer to Page Conventions to learn how to structure your folders/pages.
Certain nodes contain a $ref
property to link to its original page/meta file, they are optional when hardcoding it.
Root
The initial root of page trees.
Prop | Type | Default |
---|---|---|
name | ReactNode | - |
children | Node[] | - |
Page
External urls are also supported
Prop | Type | Default |
---|---|---|
type | "page" | - |
name | ReactNode | - |
url | string | - |
external | boolean | - |
icon | ReactElement<unknown, string | JSXElementConstructor<any>> | - |
$ref | { file: string; } | - |
Folder
Prop | Type | Default |
---|---|---|
$ref | { metaFile?: string | undefined; } | - |
type | "folder" | - |
name | ReactNode | - |
description | ReactNode | - |
root | boolean | - |
defaultOpen | boolean | - |
index | Item | - |
icon | ReactElement<unknown, 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.
Prop | Type | Default |
---|---|---|
type | "separator" | - |
name | ReactNode | - |
Icons
Icon is a ReactElement
, supported by pages and folders.
Type Bindings
You can import the type from server package.
Last updated on