Layout

The layout of documentation pages, it includes 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.

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

Non-docs Layout

To share the navbar and search dialog across other pages, use the Layout component.

It doesn't contain a sidebar, therefore, a page tree is not required.

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

Create a Route Group to share the same layout across multiple pages.

page.tsx

layout.tsx

The navigation header provides common interactive elements.

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

Prop	Type	Default
`enabled`	`boolean`	-
`component`	`ReactNode`	-
`githubUrl`	`string`	-
`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`	-

A simple answer is No.

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 (e.g. non-docs layout).

Links

Navigation links displayed on every page.

Item

A link to navigate to an URL, can be external.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      icon: <BookIcon />,
      text: 'Blog',
      url: '/blog',
    },
  ]}
/>

To mark the item as active when browsing child pages like /blog/post, add set it as nested-url.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      icon: <BookIcon />,
      text: 'Blog',
      url: '/blog',
      active: 'nested-url',
    },
  ]}
/>

Secondary Item

Same as normal items, but are shown as icon buttons on the navbar.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      type: 'secondary',
      icon: <BookIcon />,
      text: 'Blog',
      url: '/blog',
    },
  ]}
/>

A dropdown menu containing multiple link items.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      icon: <BookIcon />,
      type: 'menu',
      text: 'Guide',
      items: [{ ... }],
    },
  ]}
/>

Usage

Non-docs Layout

Navbar

Sidebar

Disable Sidebar from Pages

Links

Item

Secondary Item

On this page