# 导航栏

导航栏是站点全局可见的核心组件，承载着页面导航、搜索入口和主题切换等功能。WarmIsland 提供了三种导航栏样式和灵活的功能开关。

## 配置项一览

| 配置项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `navbar_style` | 下拉 | `glass` | 导航栏样式：`glass` / `minimal` / `float` |
| `navbar_show_search` | 开关 | `true` | 显示搜索按钮 |
| `navbar_show_theme_switch` | 开关 | `true` | 显示主题切换按钮 |

## 详细说明

### 导航栏样式（navbar_style）

| 值 | 说明 |
| --- | --- |
| `glass` | 毛玻璃效果，背景模糊半透明，与页面内容产生层次感（默认） |
| `minimal` | 极简风格，纯色背景，线条简洁，适合内容导向型站点 |
| `float` | 浮动样式，导航栏悬浮于内容之上，带有圆角和阴影 |

::: tip
`glass` 样式在滚动时会产生毛玻璃模糊效果，视觉效果最佳但需要浏览器支持 `backdrop-filter`。在不支持的浏览器中会自动降级为半透明背景。
:::

### 显示搜索按钮（navbar_show_search）

开启后，导航栏右侧会显示搜索按钮。点击按钮或按 `Ctrl + K`（macOS 为 `⌘ + K`）快捷键即可打开搜索面板。

::: danger
搜索功能依赖 Halo 的 **PluginSearchWidget** 插件。如果未安装此插件，搜索按钮将无法正常工作。请确保已在 Halo 后台安装并启用该插件。

安装方式：Halo 后台 → **插件** → **安装** → 搜索「Search Widget」→ 安装并启用。
:::

### 显示主题切换按钮（navbar_show_theme_switch）

开启后，导航栏右侧会显示主题切换按钮，访客可以在浅色/深色模式之间切换。按钮的标签文案可在 [基础设置](/config/basic) 中的 `label_theme_switch` 配置项自定义。

## 菜单配置

导航栏的菜单项通过 Halo 后台管理，而非主题设置面板。配置步骤如下：

1. 登录 Halo 后台管理控制台
2. 进入 **菜单** → 创建或编辑菜单组
3. 添加菜单项，支持以下类型：
   - **页面** — 链接到已创建的页面
   - **分类** — 链接到文章分类
   - **自定义链接** — 任意 URL
4. 确保菜单组被设置为主菜单（主题会自动读取主菜单渲染导航栏）

::: tip
建议菜单项数量控制在 5–7 个以内，过多会导致移动端体验下降。移动端会自动切换为汉堡菜单（☰），点击后展开侧滑菜单面板。
:::

## 快捷键

| 快捷键 | 功能 |
| --- | --- |
| `Ctrl + K` / `⌘ + K` | 打开搜索面板 |
| `Esc` | 关闭搜索面板 |

## 移动端适配

在移动端（屏幕宽度 ≤ 768px），导航栏会自动进行以下调整：

- 菜单项折叠为汉堡菜单（☰）
- 点击汉堡图标展开侧滑菜单面板
- 搜索和主题切换按钮移入侧滑菜单
- 导航栏高度适当缩减以节省屏幕空间

## 相关页面

- [基础设置](/config/basic) — 站点名称、Logo、标签文案配置
- [样式设置](/config/style) — 配色方案与动画效果配置
- [Hero 首屏](/config/hero) — 首屏区域配置
- [快速开始](/guide/getting-started) — 导航菜单配置步骤