栏目导航

使用导航控件为您的网站构建清晰的页面层级和跳转路径，引导访客高效地找到所需信息。本文将指导您选择合适的导航类型，并完成从基础添加到高级样式的各项配置。

选择导航控件类型根据您的网站设计和功能需求，选择最合适的导航控件。

控件名称

核心功能与适用场景

横向导航

在页面顶部或内容区域水平展示导航项，是 PC 网站最常用的主导航形式。

竖向导航

在页面侧边垂直展示导航项，适合需要展示较多项目或层级的场景，如管理后台的侧边栏、产品文档的目录。

面包屑

以路径形式显示访客在网站中的当前位置，方便其理解页面层级并逐级返回。常用于内容详情页、电商商品页等多级分类页面。

语言切换

为多语言网站提供语言切换入口，通常放置在全局页头或页脚。

手机/PC 切换

允许访客在手机版和 PC 版网站视图之间手动切换。适用于 PC 端和手机端设计差异较大、且希望为用户提供主动选择权的场景。

基础操作添加导航控件在设计器左侧导航栏，单击设计 > 栏目导航。

从列表中选择您需要的导航控件。

在页面的期望位置单击，即可完成添加。

调整控件位置与尺寸在页面中单击选中目标导航控件。

在控件上方悬浮出现的工具栏中，单击排列。

在位置与尺寸设置项中，调整控件的坐标、宽度和高度。

横向导航中的导航容器（样式一）默认固定在页面顶部，不支持调整位置。

删除导航控件在页面中单击选中您希望删除的导航控件。

在控件上方悬浮出现的工具栏中，单击图标。此操作会一并删除其包含的所有导航项配置，且无法恢复，请谨慎操作。

配置导航项与层级管理导航菜单中显示的项目、跳转行为和层级结构。

添加与编辑导航项在页面中选中目标导航控件。

在控件上方悬浮出现的工具栏中，单击编辑。

单击添加导航按钮，或单击已有导航项开始配置。

导航名称：访客在页面上看到的导航文字。

上级导航：用于创建二级导航。选择一个已存在的导航项作为其父级。

导航链接：设置单击该导航项后跳转的页面或链接。

打开方式：选择在当前窗口或新窗口打开链接。

图标设置：为导航项添加一个视觉图标。

创建二级导航您可以通过以下两种方式创建具有层级关系的下拉式菜单：

方法一：在设置面板中指定

在添加或编辑导航项时，从上级导航下拉列表中选择一个已存在的一级导航项，即可将其设置为该一级导航的子项。

方法二：在列表中拖拽

在编辑标签页的导航项列表中，按住一个导航项，向右拖拽并放置到另一个导航项下方，即可将其设置为二级导航。

如何设置三级导航导航控件最多支持二级导航。如需设置三级导航，可组合使用标签控件和导航控件实现。

添加指定标签控件：单击设计 > 排版布局，选择标签布局，并将其添加到页面。

将标签控件作为一级导航。将导航控件拖入标签控件中，作为二级导航。

在作为二级导航的导航控件中，通过设置上级导航，创建三级导航项。

调整导航项顺序在页面中选中目标导航控件。

在控件上方悬浮出现的工具栏中，单击编辑。

在导航项列表中，将鼠标悬停在需要移动的导航项名称前的上，按住并上下拖动，即可调整其在同级导航中的顺序。

自定义样式与交互定义导航项通用样式您可以为导航项在不同交互状态下设置不同的外观，以提供清晰的视觉反馈。

在页面中选中目标导航控件。

在控件上方悬浮出现的工具栏中，单击样式。

分别设置导航项在以下三种状态时的样式（如颜色、字体、背景等）：

常态：默认显示样式。

悬停：鼠标指针悬停在导航项上时的样式。

选中：当前页面对应的导航项被单击后的活动样式。

配置导航容器导航容器是横向导航列表中的首个样式，支持高度自定义设计。

说明 该控件默认作为页面顶部导航使用，位置固定，不支持修改位置。

样式：配置导航容器在以下状态的样式：

常态：默认显示样式。

切换：页面向下滚动时的样式。

悬停：鼠标指针悬停时的样式。

选中：导航项被选中后的活动样式。

编辑：配置导航容器的内容：

图片设置：设置常态和页面滚动时的 Logo 图片、鼠标悬停时显示的提示文字、单击图片后的跳转链接及打开方式。

导航设置：添加导航项并设置其上级导航、导航链接、打开方式和图标。

动效：设置导航控件的入场或悬停动画。

排列：设置导航容器的尺寸。

设置动效为导航控件添加入场或悬停动画，可提升页面的视觉体验。

在页面中选中目标导航控件。

在控件上方悬浮出现的工具栏中，单击动效。

根据需要为控件添加入场或悬停动画。