Browse documentation

Historical template

Notebook

A more compact version of Docs Layout

Historical Fumadocs template

Historical template documentation, retained for existing links. It is not current ClaudeSkills product guidance.

This article has no translation in the selected language. The English body is shown.

The navigation uses English labels. Article languages are shown separately; the interface is not a full translation of the documentation.

On this page

Usage

Enable the notebook layout with fumadocs-ui/layouts/notebook, it's a more compact layout than the default one.

Notebook

import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { baseOptions } from '@/app/layout.config';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions}
      // the position of navbar
      nav={{ ...baseOptions.nav, mode: 'top' }}
      // the position of Sidebar Tabs
      tabMode="navbar"
      tree={source.pageTree}
    >
      {children}
    </DocsLayout>
  );
}