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 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