The layout of documentation
The layout of documentation pages, it includes a sidebar and mobile-only navbar.
It is a server component, you should not reference it in a client component.
Pass your page tree to the component.
MkSaaS Docsimport { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/app/layout.config';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout {...baseOptions} tree={tree}>
{children}
</DocsLayout>
import { DocsLayout }
See Navigation Guide for usages.
Change the icon/styles of tabs.
import { DocsLayout }
A mobile-only navbar, we recommend to customise it from baseOptions.
import type
To make the navbar background transparent, you can configure transparent mode.
import type
| Mode | Description |
|---|---|
always | Always use a transparent background |
top | When at the top of page |
none | Disable transparent background (default) |
To replace the navbar in Docs Layout, set nav.component to your own component.
import { baseOptions }
Fumadocs uses CSS Variables to share the size of layout components, and fit each layout component into appropriate position.
You need to override --fd-nav-height to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in global.css):
:root {
--fd-nav-height: 80px !important;
}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 prefetched.
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 }