이미지 번역 logoImage Translate 문서
이미지 번역 logoImage Translate 문서
홈페이지

Introduction

Quick StartWhat is FumadocsComparisons

Setup

Manual InstallationStatic Export

Writing

MarkdownInternationalization

UI

OverviewThemesSearch
Components
MDX
Docs LayoutHome LayoutNotebookDocs PageRoot Provider
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

목차

Usage