Skip to main content

​
Available Layouts

Fumadocs provides three distinct layout options, each optimized for different documentation styles:

Docs Layout

Traditional sidebar-based layout with full navigation

Flux Layout

Mobile-first floating navigation panel

Notebook Layout

Hybrid layout with top navbar and sidebar

​
Docs Layout

The classic documentation layout with a collapsible sidebar, ideal for technical documentation with deep navigation hierarchies.

​
Import

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

​
Basic Usage

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

export default function Layout({ children }) {
  return (
    <DocsLayout
      tree={pageTree}
      nav={{
        title: 'My Docs',
        url: '/docs',
      }}
    >
      {children}
    </DocsLayout>
  );
}

​
Props Reference

<DocsLayout
  tree={pageTree}
  sidebar={{
    enabled: true,
    defaultOpenLevel: 1,
    collapsible: true,
    banner: <div>Custom banner content</div>,
    footer: <div>Custom footer content</div>,
    tabs: {
      transform: (option, node) => {
        // Custom tab transformation
        return option;
      },
    },
  }}
/>

​
Tab Modes

​
Auto Mode (Default)

Tabs appear in the sidebar as a dropdown: 
<DocsLayout tree={pageTree} tabMode="auto" />

​
Top Mode

Tabs appear as a horizontal bar above the content: 
<DocsLayout tree={pageTree} tabMode="top" />

​
Flux Layout

A modern, mobile-first layout with a floating navigation panel at the bottom of the screen.

​
Import

import { DocsLayout } from 'fumadocs-ui/layouts/flux';

​
Basic Usage

app/docs/layout.tsx
import { DocsLayout } from 'fumadocs-ui/layouts/flux';
import { pageTree } from '@/lib/source';

export default function Layout({ children }) {
  return (
    <DocsLayout
      tree={pageTree}
      nav={{
        title: 'My Docs',
      }}
    >
      {children}
    </DocsLayout>
  );
}

​
Props Reference

​
Custom Navigation Panel

<DocsLayout
  tree={pageTree}
  renderNavigationPanel={(props) => (
    <NavigationPanel {...props} className="custom-styles" />
  )}
/>

​
Notebook Layout

A hybrid layout combining a top navbar with an optional sidebar, similar to Notion or Jupyter notebooks.

​
Import

import { DocsLayout } from 'fumadocs-ui/layouts/notebook';

​
Basic Usage

app/docs/layout.tsx
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { pageTree } from '@/lib/source';

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

​
Props Reference

​
Auto Mode

Shows title in sidebar, collapses to navbar on mobile: 
<DocsLayout
  tree={pageTree}
  nav={{ mode: 'auto' }}
/>

​
Top Mode

Always shows navigation in the top navbar: 
<DocsLayout
  tree={pageTree}
  nav={{ mode: 'top' }}
/>

​
Common Configuration

​
Search Integration

All layouts support search configuration: 
<DocsLayout
  tree={pageTree}
  searchToggle={{
    enabled: true,
    components: {
      lg: <CustomLargeSearch />,
      sm: <CustomSmallSearch />,
    },
  }}
/>

​
Theme Switcher

<DocsLayout
  tree={pageTree}
  themeSwitch={{
    enabled: true,
    mode: 'light-dark-system',
    component: <CustomThemeToggle />,
  }}
/>

import { HomeIcon, GithubIcon } from 'lucide-react';

<DocsLayout
  tree={pageTree}
  links={[
    {
      type: 'menu',
      text: 'Documentation',
      url: '/docs',
      active: true,
    },
    {
      type: 'menu',
      text: 'Blog',
      url: '/blog',
    },
    {
      type: 'icon',
      label: 'GitHub',
      icon: <GithubIcon />,
      url: 'https://github.com',
      external: true,
    },
  ]}
/>

​
Choosing a Layout

  • Docs Layout: Best for traditional documentation with deep navigation
  • Flux Layout: Ideal for mobile-first docs with minimal chrome
  • Notebook Layout: Perfect for guides and tutorials with top navigation

​
Examples

​
Multi-language Documentation

import { DocsLayout } from 'fumadocs-ui/layouts/docs';

export default function Layout({ children }) {
  return (
    <DocsLayout
      tree={pageTree}
      i18n={true}
      sidebar={{
        tabs: {
          transform: (option, node) => {
            return {
              ...option,
              description: `Version ${node.name}`,
            };
          },
        },
      }}
    >
      {children}
    </DocsLayout>
  );
}

​
Custom Sidebar Content

<DocsLayout
  tree={pageTree}
  sidebar={{
    banner: (
      <div className="p-4 bg-gradient-to-r from-blue-500 to-purple-500">
        <h3 className="font-bold text-white">New Release!</h3>
        <p className="text-sm text-white/80">Check out v2.0</p>
      </div>
    ),
    footer: (
      <div className="p-4 text-sm text-muted-foreground">
        Built with Fumadocs
      </div>
    ),
  }}
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us