Navbar

Configurations

Options for navbar (header).

Transparent Mode

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

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

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
      transparentMode: 'top',
    },
  };
}

Replace Navbar

To replace the navbar in different layouts, set nav.component to your own component.

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

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      component: <CustomNavbar />,
    },
  };
}

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;
}