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.

index.mdx

quickstart.mdx

index.mdx

getSpecialEvent.mdx

createSpecialEvent.mdx

getMuseumHours.mdx

index.mdx

File

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

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

## Learn More

name	description
`title`	The title of page
`description`	The description of page
`icon`	The name of icon, see Icons
`full`	Fill all available space on the page (Fumadocs UI)

Slugs

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

path (relative to content folder)	slugs
`./dir/page.mdx`	`['dir', 'page']`
`./dir/index.mdx`	`['dir']`

Folder

Organize multiple pages, you can create a Meta file to customize 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.

path (relative to content folder)	slugs
`./(group-name)/page.mdx`	`['page']`

Meta

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

meta.json

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

name	description
`title`	Display name
`icon`	The name of icon, see Icons
`pages`	Folder items (see below)
`defaultOpen`	Open the folder by default

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.

meta.json

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

meta.json

guide.mdx

components.mdx

nested/page.mdx

Rest

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

meta.json

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

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

meta.json

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

Extract

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

meta.json

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

Link

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

meta.json

{
  "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.

meta.json

{
  "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.

index.mdx

current-page.mdx

other-pages.mdx

my-page.mdx

Fumadocs UI

Fumadocs UI renders root folders as Sidebar Tabs, which allows user to switch between them.

On this page