Sidebar Links

Overview

Sidebar

Sidebar items are rendered from the page tree you passed to <DocsLayout />.

For source.pageTree, it generates the tree from your file structure, you can see Routing for available patterns.

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={source.pageTree}
      // other props
    >
      {children}
    </DocsLayout>
  );
}

You may hardcode it too:

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={{
        name: 'docs',
        children: [],
      }}
      // other props
    >
      {children}
    </DocsLayout>
  );
}

Tabs are folders with tab-like behaviours, only the content of opened tab will be visible.

Fumadocs provide a dropdown component to switch between tabs, it will be hidden unless one of its items is active.

Sidebar Tabs

You can add items by marking folders as Root Folders, create a meta.json file in the 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: 'Components',
        description: 'Hello World!',
        // active for `/docs/components` and sub routes like `/docs/components/button`
        url: '/docs/components',

        // optionally, you can specify a set of urls which activates the item
        // urls: new Set(['/docs/test', '/docs/components']),
      },
    ],
  }}
/>;

Set it to false to disable:

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout sidebar={{ tabs: false }} />;

Want further customisations?

You can specify a banner to the Docs Layout component.

import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
import { baseOptions } from '@/app/layout.config';
import { source } from '@/lib/source';

const docsOptions: DocsLayoutProps = {
  ...baseOptions,
  tree: source.pageTree,
  sidebar: {
    banner: <div>Hello World</div>,
  },
};

export default function Layout({ children }: { children: ReactNode }) {
  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
}

Decoration

Change the icon/styles of tabs.

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

<DocsLayout
  sidebar={{
    tabs: {
      transform: (option, node) => ({
        ...option,
        icon: <MyIcon />,
      }),
    },
  }}
/>;

Overview

Sidebar Tabs

Decoration

On this page