Docs Layout

Install via Fumadocs CLI

For advanced customisation that supported options cannot suffice.

npx @fumadocs/cli@latest customise

The layout of documentation pages, it includes a sidebar and mobile-only navbar.

Usage

Pass your page tree to the component.

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions()} tree={tree}>
      {children}
    </DocsLayout>
  );
}

AutoTypeTable is temporarily disabled due to package compatibility issues.

layout.tsx

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

<DocsLayout
  sidebar={{
    enabled: true,
    // replace the default sidebar
    // component:
  }}
/>;

See Sidebar Links for customising sidebar items.

AutoTypeTable is temporarily disabled due to package compatibility issues.

Nav

A mobile-only navbar, the nav prop is also reusable on other Fumadocs layouts.

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();

  return (
    <DocsLayout
      {...base}
      nav={{
        ...base.nav,
        // override
      }}
    >
      {children}
    </DocsLayout>
  );
}

AutoTypeTable is temporarily disabled due to package compatibility issues.

Transparent Mode

To make the navbar background transparent, you can configure transparent mode.

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export const baseOptions: BaseLayoutProps = {
  nav: {
    transparentMode: 'top',
  },
};

Mode	Description
`always`	Always use a transparent background
`top`	When at the top of page
`none`	Disable transparent background (default)

To replace the navbar in Docs Layout, set nav.component to your own component.

layout.tsx

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

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions()}
      nav={{
        component: <CustomNavbar />,
      }}
    >
      {children}
    </DocsLayout>
  );
}

Fumadocs uses CSS Variables to share the size of layout components, and fit each layout component into appropriate position.

You need to override --fd-nav-height to the exact height of your custom navbar, this can be done with a CSS stylesheet (e.g. in global.css):

:root {
  --fd-nav-height: 80px !important;
}

Advanced

Disable Prefetching

By default, it uses the <Link /> component of your React framework with prefetch enabled.

On Vercel, prefetch requests may cause a higher usage of serverless functions and Data Cache. It can also hit the limits of some other hosting platforms.

You can disable prefetching to reduce the amount of prefetch requests.

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

<DocsLayout sidebar={{ prefetch: false }} />;

Usage

Sidebar

Nav

Transparent Mode

Replace Navbar

Advanced

Disable Prefetching

On this page