---
title: "Notebook layout"
description: "A more compact docs layout, with a navbar beside or above the sidebar."
url: https://docscn.dev/docs/components/notebook-layout
lastModified: 2026-10-09T02:58:30.000Z
---

# Notebook layout (/docs/components/notebook-layout)

> A more compact docs layout, with a navbar beside or above the sidebar.

<div className="not-docs-typeset overflow-hidden rounded-xl border dark:hidden">
    <img alt="The notebook layout with the navbar above the sidebar and layout tabs below it" src="__img0" />
</div>

<div className="not-docs-typeset hidden overflow-hidden rounded-xl border dark:block">
    <img alt="The notebook layout with the navbar above the sidebar and layout tabs below it" src="__img1" />
</div>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/notebook-layout @docscn/notebook-page
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/notebook-layout @docscn/notebook-page
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/notebook-layout @docscn/notebook-page
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/notebook-layout @docscn/notebook-page
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

The notebook layout has its own `DocsLayout` and `DocsPage`. Import both from `layouts/notebook`:

```tsx title="app/docs/layout.tsx"
import { DocsLayout } from "@/components/docs/layouts/notebook";
import { baseOptions } from "@/lib/layout.shared";
import { source } from "@/lib/source";

export default function Layout({ children }: LayoutProps<"/docs">) {
  const base = baseOptions();

  return (
    <DocsLayout
      {...base}
      tree={source.getPageTree()}
      nav={{ ...base.nav, mode: "top" }}
      tabMode="navbar"
    >
      {children}
    </DocsLayout>
  );
}
```

```tsx title="app/docs/[[...slug]]/page.tsx"
import {
  DocsBody,
  DocsDescription,
  DocsPage,
  DocsTitle,
} from "@/components/docs/layouts/notebook/page";
```

The page components take the same props as [`DocsPage`](/docs/components/docs-page) and its companions, so switching layouts means changing `layouts/docs` to `layouts/notebook` in both imports.

Like [`DocsLayout`](/docs/components/docs-layout), it's built on the shadcn/ui sidebar, so `useSidebar()` works inside it. Unlike it, the navbar shows on desktop too, with search, the links and the theme switch. When the sidebar is collapsed, the navbar shows the title and a button to open the sidebar again.

The layout spans the full width of the window, with the sidebar against its edge. Fumadocs UI's notebook layout is centred at up to 97rem wide.

The [AI chat](/docs/components/docs-layout#ai-chat) panel (`aiChat`) works as in `DocsLayout`. With `nav.mode: "top"`, it docks below the navbar.

## Props [#props]

It takes the same props as [`DocsLayout`](/docs/components/docs-layout), except for the ones below.

<TypeTable
  type="{
  nav: {
    description: (
      <>
        As for <code>{&#x22;DocsLayout&#x22;}</code>, plus <code>{&#x22;mode&#x22;}</code>:{&#x22; &#x22;}
        <code>{&#x22;top&#x22;}</code> places the navbar above the sidebar, across the
        whole width, and <code>{&#x22;auto&#x22;}</code> places it beside the sidebar.
      </>
    ),
    type: 'NavOptions & { mode?: &#x22;top&#x22; | &#x22;auto&#x22; }',
    default: '{ mode: &#x22;auto&#x22; }',
  },
  links: {
    description: (
      <>
        Links shown in the navbar from the <code>{&#x22;lg&#x22;}</code> breakpoint, and
        in the sidebar below it. <code>{'type: &#x22;menu&#x22;'}</code> links open a
        menu on hover.
      </>
    ),
    type: &#x22;LinkItemType[]&#x22;,
  },
  tabMode: {
    description: (
      <>
        Show layout tabs as a dropdown in the sidebar (
        <code>{&#x22;sidebar&#x22;}</code>), or as a row below the navbar from the{&#x22; &#x22;}
        <code>{&#x22;lg&#x22;}</code> breakpoint (<code>{&#x22;navbar&#x22;}</code>).
      </>
    ),
    type: '&#x22;sidebar&#x22; | &#x22;navbar&#x22;',
    default: '&#x22;sidebar&#x22;',
  },
  themeSwitch: {
    description: (
      <>The theme switch, in the navbar, or the sidebar on mobile.</>
    ),
    type: &#x22;{ enabled?, mode? }&#x22;,
  },
  containerProps: {
    description: (
      <>Props for the element that wraps the navbar, sidebar and page.</>
    ),
    type: 'ComponentProps<&#x22;div&#x22;>',
  },
}"
/>

`sidebar` takes the same options as `DocsLayout`'s, except `enabled`: the notebook layout always has a sidebar. Search shows in the navbar, not the sidebar.