# 导航条

## 功能概述

导航条是一种内容引导功能，支持将页面中的重要内容分块展示，并在顶部生成可点击的导航条。扫码者点击导航条后，可自动滚动跳转到对应内容位置，或仅显示对应内容，无需手动滑动查找，大大提升二维码页面的可读性和使用体验。支持两种点击效果：滚动至对应位置： 点击导航条，页面自动滚动至对应内容位置。仅显示对应内容： 点击导航条，仅显示对应内容，其它内容隐藏，更聚焦阅读。

## 效果展示

打开扫码页面后，导航条会固定显示在内容上方。例如：导航条包含“产品详情 / 安装说明 / 常见问题 / 联系我们”四个内容。点击“安装说明”，页面自动跳转至该内容段落。或仅展示“安装说明”部分内容，其它部分隐藏。

![file](https://blogcdnimg.clewm.net/2025/03/image-1742887784115_17428877850929.png)图片说明：展示“导航条”功能的两种点击效果：顶部固定显示与仅显示对应内容，用于产品文档中快速跳转至“常见问题”等模块。

## 适用场景

导航条适用于内容结构较多、信息层级较清晰的二维码页面，常见场景包括：产品说明书： 将“产品参数 / 安装教程 / 使用方法 / 注意事项”分别设置为导航项。活动介绍页： 快速切换“活动规则 / 奖励设置 / 报名方式”。内部培训资料： 帮助员工快速定位到“课程简介 / 学习指南 / 提问反馈”。客户服务页： 清晰展示“服务流程 / 常见问题 / 联系方式”。通过导航条结构化展示内容，不仅提升信息传达效率，也让扫码者有更清晰的阅读路径。

## 设置教程

在编辑器中使用导航条非常简单：

### 开启导航条

在编辑器中点击左侧组件栏【导航条】，点击开启。

![file](https://blogcdnimg.clewm.net/2025/03/image-1742866344292_17428663469631.png)图片说明：该图展示的是内容编辑后台中“导航条”功能的开启操作指引，含开关状态、点击步骤及关联模块说明。

### 设置点击效果和导航色

可按需选择点击导航条的效果：滚动至对应位置（展示全文）、仅显示对应内容（其他内容隐藏）。可自定义导航被选中时的颜色，保持页面整体风格统一。

### 添加导航内容块并插入到正文相应位置

添加内容，修改名称。在正文中任意位置，点击插入，作为该内容的导航跳转位置。

![file](https://blogcdnimg.clewm.net/2025/03/image-1742866995830_17428669968969.png)图片说明：该图展示产品详情页的编辑与配置界面，含导航条、样式设置、文档插入及常见问题等模块，用于自定义页面内容与交互。