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.

Decoration

Change the icon/styles of tabs.

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
 
<DocsLayout
  sidebar={{
    tabs: {
      transform: (option, node) => ({
        ...option,
        icon: 'my icon',
      }),
    },
  }}
/>;

Overview

Sidebar Tabs

Decoration

On this page