LogoMy Attachment Style Quiz Docs
LogoMy Attachment Style Quiz Docs
Homepage

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
MDX
Docs LayoutHome LayoutNotebookDocs PageRoot Provider
X (Twitter)
Layouts

Notebook

A more compact version of Docs Layout

Usage

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

Notebook

layout.tsx
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>
  );
}

Home Layout

Shared layout for other pages

Docs Page

A page in your documentation

Table of Contents

Usage