Layout

The layout of documentation pages, it must be nested under the Root Provider.

Usage

Wrap the children and 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 Pages

If you want to share navbar and search dialog between other pages, you may use the Layout component for non-docs page.

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

You can create a Route Group to share the same layout across multiple pages.

Navbar

Sidebar