Adding a Root Folder
Learn how to add a new root folder to your documentation
Introduction
Fumadocs allows you to create new root folders in your documentation. This helps you organize your docs into clear sections or categories. This guide will walk you through adding a new root folder step by step.
Steps to Add a New Root Folder
Step 1: Create a New Folder
Create a new folder in the content/docs directory. You can name it anything; this example uses cli.
mkdir content/docs/cliStep 2: Update the meta.json File
Open the meta.json file located in the content/docs directory. Add your new folder name to the pages array:
{
"pages": [
"(index)",
"api-reference",
"changelog",
"cli"
]
}Step 3: Update the Homepage
Open page.tsx in the app/(home) directory and add a new DocumentationItem:
<div className="mt-8 grid grid-cols-1 gap-4 text-left md:grid-cols-2">
<DocumentationItem
title="Documentation"
description="Get started with the Fumadocs framework."
icon={{ icon: BookIcon, id: '(index)' }}
href="/docs"
/>
<DocumentationItem
title="API Reference"
description="Explore Fumadocs's API reference."
icon={{ icon: WebhookIcon, id: 'api-reference' }}
href="/docs/api-reference"
/>
<DocumentationItem
title="CLI"
description="Learn how to use Fumadocs's CLI."
icon={{ icon: ChevronRightIcon, id: 'cli' }}
href="/docs/cli"
/>
</div>Step 4: Update Colors (Optional)
Edit globals.css in the styles directory to define colors for your new folder:
@layer base {
:root {
--index-color: hsl(220deg 91% 54%);
--api-reference-color: hsl(250 80% 54%);
--changelog-color: var(--color-fd-foreground);
--cli-color: hsl(120 100% 54%);
}
.dark {
--index-color: hsl(217deg 92% 76%);
--api-reference-color: hsl(250 100% 80%);
--changelog-color: var(--color-fd-foreground);
--cli-color: hsl(120 100% 80%);
}
}Update the base styles to apply the new color:
@layer base {
body {
overscroll-behavior-y: none;
background-color: var(--color-fd-background);
}
.\(index\) {
--color-fd-primary: var(--index-color) !important;
}
.api-reference {
--color-fd-primary: var(--api-reference-color) !important;
}
.changelog {
--color-fd-primary: var(--changelog-color) !important;
}
.cli {
--color-fd-primary: var(--cli-color) !important;
}
}Step 5: Create meta.json in the New Folder
Create a meta.json file in your new cli folder:
touch content/docs/cli/meta.jsonAdd the following content to meta.json:
{
"title": "CLI",
"description": "Learn how to use the Fumadocs CLI",
"root": true,
"icon": "ChevronRight",
"pages": ["---Getting Started---", "index", "..."]
}This file defines the metadata for your new folder, including its title, description, and icon.
Step 6: Create a New Page
Create an index.mdx page in your new cli folder:
touch content/docs/cli/index.mdxAdd initial content to index.mdx:
---
title: CLI
description: 'Learn how to use the Fumadocs CLI'
icon: ChevronRightIcon
---
## Introduction
The Fumadocs CLI is a command-line tool for managing your documentation. It helps you create, build, and deploy your docs.
## Installation
...That's it! You've successfully added a new root folder to your documentation. Now, navigate to your docs website to view your new folder and content.
Last updated on