Skip to main content

​
DocsLayout

The main layout component for documentation pages with sidebar navigation. 
import { DocsLayout } from 'fumadocs-ui/layouts/docs';

​
Props

​
tree
PageTree.Root
required
The page tree structure for navigation
​
nav
NavOptions
Navigation bar configuration
  • enabled - Show/hide navigation (default: true)
  • component - Replace default navigation
  • title - Navigation title
  • url - Title link URL (default: /)
  • transparentMode - Transparent background mode: 'always', 'top', or 'none'
  • children - Additional nav content
​
sidebar
SidebarOptions
Sidebar configuration
  • enabled - Show/hide sidebar (default: true)
  • component - Replace entire sidebar
  • components - Replace individual sidebar components
  • tabs - Sidebar tabs configuration or array of tabs
  • banner - Content above sidebar tree
  • footer - Content below sidebar tree
  • collapsible - Allow collapsing sidebar on desktop (default: true)
  • defaultOpenLevel - Default folder open level
  • prefetch - Enable link prefetching
​
tabMode
'top' | 'auto'
Tab display mode (default: 'auto')
  • 'top' - Show tabs at the top
  • 'auto' - Show tabs in sidebar dropdown
​
searchToggle
object
Search toggle configuration
  • enabled - Show/hide search (default: true)
  • components.sm - Custom small screen search toggle
  • components.lg - Custom large screen search toggle
​
themeSwitch
object
Theme switcher configuration
  • enabled - Show/hide theme switch (default: true)
  • component - Custom theme switch component
  • mode - Theme mode: 'light-dark' or 'light-dark-system'
​
i18n
boolean | I18nConfig
Enable internationalization (default: false)
​
links
LinkItemType[]
Navigation links array
​
githubUrl
string
GitHub repository URL (automatically adds GitHub icon link)
​
containerProps
HTMLAttributes<HTMLDivElement>
Props for the root container div

​
Usage

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { pageTree } from '@/lib/source';

export default function Layout({ children }) {
  return (
    <DocsLayout
      tree={pageTree}
      nav={{
        title: 'My Documentation',
        url: '/'
      }}
      sidebar={{
        defaultOpenLevel: 1,
        banner: <div>Important Notice</div>
      }}
      githubUrl="https://github.com/user/repo"
    >
      {children}
    </DocsLayout>
  );
}

​
DocsPage

Page layout component for individual documentation pages. 
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';

​
Props

​
toc
TOCItemType[]
Table of contents items
​
full
boolean
Extend page to fill all available space (default: false)
​
breadcrumb
object
Breadcrumb configuration
  • enabled - Show/hide breadcrumb (default: true)
  • component - Replace breadcrumb component
​
footer
object
Footer navigation configuration
  • enabled - Show/hide footer (default: true)
  • component - Replace footer component
  • children - Additional footer content
​
tableOfContent
object
Desktop table of contents configuration
  • enabled - Show/hide TOC
  • component - Replace TOC component
  • header - Content before TOC
  • footer - Content after TOC
  • style - TOC style: 'normal' or 'clerk' (default: 'normal')
  • single - Single active heading mode
​
tableOfContentPopover
object
Mobile TOC popover configuration (same options as tableOfContent except single)
​
className
string
CSS class for the #nd-page container

​
Usage

import { DocsPage, DocsBody, DocsTitle, DocsDescription } from 'fumadocs-ui/layouts/docs/page';

export default function Page() {
  return (
    <DocsPage toc={toc}>
      <DocsTitle>Getting Started</DocsTitle>
      <DocsDescription>
        Learn how to get started with our product
      </DocsDescription>
      <DocsBody>
        {/* Your content */}
      </DocsBody>
    </DocsPage>
  );
}

​
DocsBody

Adds typography styles to page content. 
import { DocsBody } from 'fumadocs-ui/layouts/docs/page';

​
Props

Extends HTMLAttributes<HTMLDivElement>

​
Usage

<DocsBody>
  <h2>Content with typography styles</h2>
  <p>Automatically styled content</p>
</DocsBody>

​
DocsTitle

Page title component with consistent styling. 
import { DocsTitle } from 'fumadocs-ui/layouts/docs/page';

​
Props

Extends HTMLAttributes<HTMLHeadingElement>

​
DocsDescription

Page description component. 
import { DocsDescription } from 'fumadocs-ui/layouts/docs/page';

​
Props

Extends HTMLAttributes<HTMLParagraphElement>

​
Usage

<DocsDescription>
  A brief description of the page content
</DocsDescription>

​
EditOnGitHub

Button component for editing page on GitHub. 
import { EditOnGitHub } from 'fumadocs-ui/layouts/docs/page';

​
Props

Extends ComponentProps<'a'>

​
Usage

<EditOnGitHub href="https://github.com/user/repo/blob/main/content/docs/page.mdx" />

​
HomeLayout

Layout for landing/home pages. 
import { HomeLayout } from 'fumadocs-ui/layouts/home';

​
Props

​
nav
NavOptions
Navigation configuration (same as DocsLayout)Additional option:
  • enableHoverToOpen - Open mobile menu on hover
​
links
LinkItemType[]
Navigation links
​
githubUrl
string
GitHub repository URL
​
i18n
boolean | I18nConfig
Enable internationalization
​
themeSwitch
object
Theme switcher configuration
​
searchToggle
object
Search toggle configuration

​
Usage

import { HomeLayout } from 'fumadocs-ui/layouts/home';

export default function Home() {
  return (
    <HomeLayout
      nav={{
        title: 'My Project',
        enableHoverToOpen: true
      }}
      links={[
        { type: 'main', url: '/docs', text: 'Documentation' },
        { type: 'main', url: '/blog', text: 'Blog' }
      ]}
    >
      {/* Hero section and content */}
    </HomeLayout>
  );
}

​
Notebook Layout

Alternative documentation layout with navbar-based navigation. 
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';

​
Props

Similar to DocsLayout with additional options:
​
tabMode
'sidebar' | 'navbar'
Tab display location (default: 'sidebar')
  • 'sidebar' - Show tabs in sidebar
  • 'navbar' - Show tabs in navbar
​
nav.mode
'top' | 'auto'
Navigation mode (default: 'auto')
  • 'top' - Always show in navbar
  • 'auto' - Show in sidebar on desktop, navbar on mobile

​
Usage

import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { pageTree } from '@/lib/source';

export default function Layout({ children }) {
  return (
    <DocsLayout
      tree={pageTree}
      tabMode="navbar"
      nav={{ mode: 'top' }}
    >
      {children}
    </DocsLayout>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us