Routing

Introduction

Fumadocs uses a file-system based routing system to organize your documents. This allows you to create a clear and consistent structure for your documentation, making it easier for users to navigate and find the information they need.

File

A MDX or Markdown file, you can customise its frontmatter.

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

Slugs

The slugs of a page are generated from its file path.

Folder

Organize multiple pages, you can create a Meta file to customise folders.

Folder Group

By default, putting a file into folder will change its slugs. You can wrap the folder name in parentheses to avoid impacting the slugs of child files.

Meta

Customise folders by creating a meta.json file in the folder.

{
  "title": "Display Name",
  "icon": "MyIcon",
  "pages": ["index", "getting-started"],
  "defaultOpen": true
}

Pages

By default, folder items are sorted alphabetically.

You can add or control the order of items using pages, items are not included unless they are listed inside.

{
  "title": "Name of Folder",
  "pages": ["guide", "components", "---My Separator---", "./nested/page"]
}

Rest

Add a ... item to include remaining pages (sorted alphabetically), or z...a for descending order.

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

You can add !name to prevent an item from being included.

{
  "pages": ["guide", "...", "!components"]
}

Extract

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

{
  "pages": ["guide", "...nested"]
}

Link

Use the syntax [Text](url) to insert links, or [Icon][Text](url) to add icon.

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

Icons

This Fumadocs template converts the icon names to JSX elements in runtime, and renders it as a component.

Root Folder

Marks the folder as a root folder, only items in the opened root folder will be considered.

{
  "title": "Name of Folder",
  "description": "The description of root folder (optional)",
  "root": true
}

For example, when you are opening a root folder framework, the other folders (e.g. headless) are not shown on the sidebar and other navigation elements.