Sidebar Links

Overview

Sidebar items and the slugs of each page are generated from your file structure, see Organizing Pages for available patterns.

Sidebar

A navigation component to switch between tabs.

Sidebar Tabs

You can add items from page tree by creating a meta.json file (Root Folder):

content/docs/my-folder/meta.json

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

Or specify them explicitly:

/app/docs/layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
<DocsLayout
  sidebar={{
    tabs: [
      {
        title: 'Test',
        description: 'Test Tab',
        url: '/docs/test',
      },
    ],
  }}
/>;

Set it to false to disable:

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
<DocsLayout sidebar={{ tabs: false }} />;

Want further customisations?

You can specify more props to the Docs Layout component.

Document Search

Search is also an important way to navigate between pages, you can refer to Search to learn more about configuring document search.

Overview

Sidebar Tabs

Document Search

On this page