導覽列

設定

導覽列 (頁首) 的選項。

屬性

型別

透明模式

若要讓導覽列背景呈現透明，可以設定透明模式。

lib/layout.shared.tsx

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

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

模式	說明
`always`	一律使用透明背景
`top`	僅在位於頁面頂端時使用透明背景
`none`	停用透明背景 (預設)

若要替換各個版面配置中的導覽列，請將 nav.component 設定為您自己的元件。

lib/layout.shared.tsx

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

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

Fumadocs 使用 CSS 變數來共用版面配置元件的尺寸，讓每個版面配置元件都能放在適當的位置。

您需要將 --fd-nav-height 覆寫為自訂導覽列的實際高度，可以透過 CSS 樣式表來設定 (例如在 global.css 中) ：

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

設定

透明模式

替換導覽列

本頁目錄

導覽列

設定複製錨點連結

透明模式複製錨點連結

替換導覽列複製錨點連結

本頁目錄

設定

透明模式

替換導覽列