# Fumadocs UI (the default theme of Fumadocs): 導覽列
URL: /zh-TW/docs/ui/layouts/nav
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/layouts/nav.zh-TW.mdx

導覽列／頁首設定。

## 設定 [#configurations]

導覽列 (頁首) 的選項。

### $Fumadocs

| Prop               | Type                                                                                                                     | Description                                |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
| `enabled?`         | `boolean \| undefined`                                                                                                   |                                            |
| `title?`           | `React.FC<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>> \| React.ReactNode` |                                            |
| `url?`             | `string \| undefined`                                                                                                    | Redirect url of title Default: `'/'`       |
| `transparentMode?` | `"always" \| "none" \| "top" \| undefined`                                                                               | Use transparent background Default: `none` |
| `component?`       | `React.ReactNode`                                                                                                        | **Deprecated.**                            |

### 透明模式 [#transparent-mode]

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

```tsx tab="All" title="lib/layout.shared.tsx"
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
      // [!code ++]
      transparentMode: 'top',
    },
  };
}
```

```tsx tab="Home Layout"
import { baseOptions } from '@/lib/layout.shared';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <HomeLayout
      {...base}
      nav={{
        ...base.nav,
        // [!code ++]
        transparentMode: 'top',
      }}
    >
      {children}
    </HomeLayout>
  );
}
```

```tsx tab="Docs Layout"
import { baseOptions } from '@/lib/layout.shared';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <DocsLayout
      {...base}
      nav={{
        ...base.nav,
        // [!code ++]
        transparentMode: 'top',
      }}
    >
      {children}
    </DocsLayout>
  );
}
```

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

### 替換導覽列 [#replace-navbar]

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

```tsx tab="All" title="lib/layout.shared.tsx"
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      // [!code ++]
      component: <CustomNavbar />,
    },
  };
}
```

```tsx tab="Home Layout"
import { baseOptions } from '@/lib/layout.shared';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <HomeLayout
      {...base}
      nav={{
        ...base.nav,
        // [!code ++]
        component: <CustomNavbar />,
      }}
    >
      {children}
    </HomeLayout>
  );
}
```

```tsx tab="Docs Layout"
import { baseOptions } from '@/lib/layout.shared';
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  const base = baseOptions();
  return (
    <DocsLayout
      {...base}
      nav={{
        ...base.nav,
        // [!code ++]
        component: <CustomNavbar />,
      }}
    >
      {children}
    </DocsLayout>
  );
}
```

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

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

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