---
title: "Customizing Layouts"
description: "Customizing layouts allows you to tailor your documentation site's visual appearance, structure, and branding to fit your needs. You can configure color themes, modify page headers and footers, adj..."
last_updated: "2026-10-12T07:55:48.675683+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/how-to-guides/customizing-layouts"
---

## Overview

### About Customizing Layouts

Customizing layouts allows you to tailor your documentation site's visual appearance, structure, and branding to fit your needs. You can configure color themes, modify page headers and footers, adjust logos and titles, and personalize specific sections like sidebars and tables of contents using layout slots and configuration options.

---

### Customizing Color Themes and Variables

You can customize the color scheme and appearance of your layouts by adjusting styling configuration variables in your global stylesheet.

Supported color and layout theme variable keys include:
- Background and foreground colors (`--color-fd-background`, `--color-fd-foreground`, `--color-fd-muted`, `--color-fd-muted-foreground`)
- Card and popover elements (`--color-fd-card`, `--color-fd-card-foreground`, `--color-fd-popover`, `--color-fd-popover-foreground`)
- Interactive elements and borders (`--color-fd-primary`, `--color-fd-primary-foreground`, `--color-fd-secondary`, `--color-fd-secondary-foreground`, `--color-fd-accent`, `--color-fd-accent-foreground`, `--color-fd-border`, `--color-fd-ring`)
- Layout dimensions (`--spacing-fd-container`, `--fd-page-width`, `--fd-sidebar-width`, `--fd-toc-width`, `--fd-layout-width`, `--fd-banner-height`, `--fd-nav-height`, `--fd-tocnav-height`)

> [!TIP]
> You can define distinct color values for light and dark modes by grouping your variables inside `:root` for light mode and `.dark` for dark mode selectors.

---

### Configuring Logos and Navigation Titles

You can customize the site title and logo displayed in the navigation bar by updating your base layout configuration.

```tsx
import { FumadocsLogo } from '@/components/logo';

export function layoutConfig(config) {
  const { base } = config.layout;

  return {
    async base() {
      let defaultConfig;
      if (typeof base === 'function') defaultConfig = await base();
      else if (typeof base === 'object') defaultConfig = base;

      return {
        ...defaultConfig,
        nav: {
          title: (
            <>
              <FumadocsLogo className="size-5" />
              My Documentation
            </>
          ),
          ...defaultConfig?.nav,
        },
      };
    },
  };
}
```

---

### Adding and Configuring Banners

Banners allow you to display important announcements or alerts at the very top of your pages. Banners support normal and animated rainbow styles, automatic layout padding adjustments, and persistent dismissal options.

```tsx
import { Banner } from '@/components/banner';

export function AnnouncementBanner() {
  return (
    <Banner id="announcement-v2" variant="normal">
      Check out our brand new release!
    </Banner>
  );
}
```

---

### Using Layout Slots for Custom Headers and Footers

#### Overview of Layout Slots

Layout slots let you swap out or extend internal layout components—such as navigation headers, sidebars, tables of contents, breadcrumbs, and footers—without rebuilding the entire layout structure.

#### Customizing Page Slots

At your page component level, you can supply custom components to individual slots like the table of contents, container, footer, or breadcrumb:

```tsx
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
import { Container, Footer, Breadcrumb } from './custom-components';

return (
  <DocsPage
    slots={{
      container: Container,
      footer: Footer,
      breadcrumb: Breadcrumb,
    }}
  >
    {/* Page content */}
  </DocsPage>
);
```

#### Customizing Layout Slots

At your layout level, you can customize structural elements like the sidebar, header, and tab dropdowns:

```tsx
import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
import { SidebarProvider, Sidebar, SidebarTrigger, useSidebar } from './custom-sidebar';

return (
  <DocsLayout
    slots={{
      sidebar: {
        provider: SidebarProvider,
        root: Sidebar,
        trigger: SidebarTrigger,
        useSidebar: useSidebar,
      },
    }}
  >
    {/* Layout content */}
  </DocsLayout>
);
```

---

### Workflow Summary

```mermaid
flowchart TD
    A[Choose layout type] --> B[Customize theme variables in CSS]
    B --> C[Configure nav title and logo]
    C --> D[Add optional banners]
    D --> E[Override specific sections using slots]
```

---

### Configuration Reference

| Option / Property | Description | Target Component |
| :--- | :--- | :--- |
| `variant` | Choose between `normal` and `rainbow` banner styles | `Banner` |
| `height` | Set the height of the banner element (default: `3rem`) | `Banner` |
| `changeLayout` | Automatically adjust layout offsets to fit the banner | `Banner` |
| `full` | Extend the page width to fill all available space | `DocsPage` |
| `collapsible` | Enable or disable desktop sidebar collapsing | `Sidebar` |
| `transparentMode` | Configure navigation bar transparency behavior (`'always'` \| `'top'` \| `'none'`) | `NavProvider` / `Header` |

## Related

- [Interactive Components](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/core-features/interactive-components)
- [Site Navigation](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/guide/core-features/site-navigation)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.