Page Conventions

Overview

This is a shared convention for organizing your pages, followed by all file-system based content sources including Fumadocs MDX.

File

A MDX or Markdown file.

Frontmatter

By default, it includes:

You may extend your content source to add additional properties.

---
title: My Page
description: Best document ever
icon: HomeIcon
full: false
---
 
## Learn More

Folder

Organize multiple pages. If not specified, folder name will be used as the display name.

Pages are sorted alphabetically, except for index.mdx which is always ordered at the top.

Use meta file to customise a folder.

Open by Default

Force to open the folder by default.

{
  "title": "Name of Folder",
  "defaultOpen": true
}

Multiple Page Trees

Adding a root property in meta can mark your folder as a root. The nearest root of the current page will be shown on all navigation elements.

In other words, when you are in a root folder called core, the other folders (e.g. ui) are not shown on the sidebar.

To allow users switching between page trees, you can implement a page tree switch. On Fumadocs UI, it is available via <RootToggle />.

{
  "title": "Name of Folder",
  "root": true
}

Meta

Customize the display name, order of pages, or its items on the sidebar by creating a meta.json in the folder.

When a meta file presents, items are not included unless you have explicitly added them to pages.

{
  "title": "Name of Folder",
  "pages": ["guide", "components"]
}

You can add the file names to specify their order.

Path

The items of pages property can be a relative path to a page or folder. File extensions are not required.

{
  "title": "Name of Folder",
  "pages": ["../headless/page"]
}

Separator

You can define a separator in meta by adding a item surrounded with ---.

{
  "title": "Name of Folder",
  "pages": ["---Separator---"]
}

Rest

Tired to specify the order of every single page in meta.json? You can use ... to automatically add and sort remaining items.

{
  "title": "Folder",
  "pages": ["guide", "..."]
}

Except

In conjunction with the Rest item (...), you can use !name to exclude an item from the rest.

{
  "title": "Folder",
  "pages": ["...", "!hide-this-page"]
}

Extract

You can extract the items from a folder with ...folder_name.

{
  "title": "Folder",
  "pages": ["guide", "...folder"]
}

Link

Use the syntax [Text](url) to insert links.

{
  "title": "Folder",
  "pages": ["index", "[Vercel](https://vercel.com)"]
}

Icons

Specify an icon name for pages and folders with the icon property.

---
title: My Page
icon: MyIcon
---

{
  "title": "My Folder",
  "icon": "MyIcon"
}

Since Fumadocs doesn't include a icon library, you have to convert the icon names to JSX elements so that it can be rendered as a component.

For built-in content sources, you can the icon handler from Source API.

Internationalization

You can create a localized page for specific language by adding .{locale} to your file name. Pages can't be language-specific, you must create a page for default locale in order to have its localized version.

This works for meta files too, you can add .{locale} to the file name like meta.cn.json.

Example

Assume your default language is en.