导航栏

配置

🌐 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

要在不同布局中替换导航栏，请将 nav.component 设置为你自己的组件。

🌐 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 使用 CSS 变量 来共享布局组件的大小，并将每个布局组件放置到合适的位置。

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

你需要将 --fd-nav-height 覆盖为自定义导航栏的准确高度，这可以通过 CSS 样式表完成（例如在 global.css 中）：

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