Docs Layout

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

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

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

The navigation header provides common interactive elements.

On larger devices, it becomes a part of sidebar.

<DocsLayout
  nav={{ title: <Logo />, githubUrl: 'https://github.com/fuma-nama/fumadocs' }}
/>

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-
`title`	`ReactNode`	-
`children`	`ReactNode`	-
`url`	`string`	`'/'`
`enableSearch`	`boolean`	-
`transparentMode`	`"always" \| "top" \| "none"`	`none`

Provide elements to navigate between pages.

<DocsLayout sidebar={{ footer: <ShareButton /> }} />

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-
`collapsible`	`boolean`	-
`footer`	`ReactNode`	-
`defaultOpenLevel`	`number`	`1`
`components`	`Partial<Components>`	-
`banner`	`ReactNode`	-
`bannerProps`	`HTMLAttributes<HTMLDivElement>`	-
`footerProps`	`HTMLAttributes<HTMLDivElement>`	-

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.

Usage

Navbar

Sidebar

Disable Sidebar from Pages

On this page