Docs Layout

The layout of documentation pages, it includes a sidebar and navbar.

It is a server component, you should not reference it in a client component.

Usage

Pass your page tree to the component.

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/app/layout.config';
import type { ReactNode } from 'react';
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions} tree={tree}>
      {children}
    </DocsLayout>
  );
}

Provide elements to navigate between pages.

layout.tsx

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

Add a navigation component to switch between root folders (Enabled by default). You can add items from the page tree (see Root Folder).

Good to know

You can also use Root Toggle component.

Disable Tabs

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

Add Description

Add description to the meta file of root folder.

meta.json

{
  "root": true,
  "description": "The description of root folder"
}

Decoration

Change the icon/styles of tabs.

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

Disable Prefetching

By default, it uses the Next.js Link component with prefetch enabled. When the link component appears into the browser viewport, the content (RSC payload) will be lazy loaded.

Unless you put most of the page items in folders, all page items on the sidebar will be lazy loaded. On Vercel, this may cause a high usage of serverless functions and Data Cache. It can also hit the limits of some other hosting platforms.

You can disable prefetching to reduce the amount of RSC requests.

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

This is not supported. Due to the limitations of App Router, layouts are not re-rendered when navigating between pages. It is an anti-pattern to change your layout from a page.

You can consider:

Disable sidebar from the entire layout.
Create a MDX Page in a layout that doesn't contain a sidebar.

Notebook

Enable the notebook layout with fumadocs-ui/layouts/notebook.

Notebook

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/app/layout.config';
import type { ReactNode } from 'react';
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions} tree={tree}>
      {children}
    </DocsLayout>
  );
}

References

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-
`collapsible`	`boolean`	-
`components`	`Partial<SidebarComponents>`	-
`tabs`	`false \| Option[] \| TabOptions`	-
`banner`	`ReactNode`	-
`footer`	`ReactNode`	-
`hideSearch`	`boolean`	`false`
`defaultOpenLevel`	`number`	`0`
`prefetch`	`boolean`	`true`

Layout

Prop	Type	Default
`tree`	`Root`	-
`sidebar`	`Partial<SidebarOptions>`	-
`containerProps`	`HTMLAttributes<HTMLDivElement>`	-
`disableThemeSwitch`	`boolean`	-
`i18n`	`boolean`	`false`
`githubUrl`	`string`	-
`links`	`LinkItemType[]`	-
`nav`	`Partial<NavOptions>`	-
`children`	`ReactNode`	-

Usage

Sidebar

Sidebar Tabs

Disable Tabs

Add Description

Decoration

Disable Prefetching

Disable Sidebar from Pages

Notebook

References

Sidebar

Layout

On this page