Docs Layout

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

Usage

Pass your page tree to the component.

import { DocsLayout } from 'fumadocs-ui/layout';
 
export default function Layout({ children }) {
  return <DocsLayout tree={tree}>{children}</DocsLayout>;
}

Sidebar

Provide elements to navigate between pages.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout sidebar={{ footer: <ShareButton /> }} />;

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/layout';
 
<DocsLayout sidebar={{ prefetch: false }} />;

Disable Sidebar from Pages

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:

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

Reference