Notebook Layout
A compact version of Docs Layout
A compact version of <DocsLayout />.
Install via Fumadocs CLI
For advanced customization that supported options cannot suffice.
npx @fumadocs/cli@latest customizeUsage
Enable the notebook layout with fumadocs-ui/layouts/notebook.
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout {...baseOptions()} tree={source.getPageTree()}>
{children}
</DocsLayout>
);
}Make sure to update your page import too:
import { ... } from 'fumadocs-ui/layouts/docs/page';
import { ... } from 'fumadocs-ui/layouts/notebook/page';Configurations
The options are inherited from Docs Layout, with minor differences:
- sidebar/navbar cannot be replaced, Notebook layout is more opinionated than the default one.
- additional options (see below).
Tab Mode
Configure the style of Layout Tabs, see the linked docs for how to add layout tabs.
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<DocsLayout
{...baseOptions()}
tabMode="navbar"
tree={source.getPageTree()}
>
{children}
</DocsLayout>
);
}Nav Mode
Configure the style of navbar.
Below is an example using tab mode navbar & nav mode top:
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
const { nav, ...base } = baseOptions();
return (
<DocsLayout
{...base}
nav={{ ...nav, mode: 'top' }}
tree={source.getPageTree()}
>
{children}
</DocsLayout>
);
}How is this guide?