栏目导航-域名-阿里云

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

选择导航控件类型

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

控件名称	核心功能与适用场景
横向导航	在页面顶部或内容区域水平展示导航项，是 PC 网站最常用的主导航形式。
竖向导航	在页面侧边垂直展示导航项，适合需要展示较多项目或层级的场景，如管理后台的侧边栏、产品文档的目录。
面包屑	以路径形式显示访客在网站中的当前位置，方便其理解页面层级并逐级返回。常用于内容详情页、电商商品页等多级分类页面。
语言切换	为多语言网站提供语言切换入口，通常放置在全局页头或页脚。
手机/PC 切换	允许访客在手机版和 PC 版网站视图之间手动切换。适用于 PC 端和手机端设计差异较大、且希望为用户提供主动选择权的场景。

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

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

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

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

方法二：在列表中拖拽

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

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

您可以为导航项在不同交互状态下设置不同的外观，以提供清晰的视觉反馈。

在页面中选中目标导航控件。
在控件上方悬浮出现的工具栏中，单击样式。
分别设置导航项在以下三种状态时的样式（如颜色、字体、背景等）：
- 常态：默认显示样式。
- 悬停：鼠标指针悬停在导航项上时的样式。
- 选中：当前页面对应的导航项被单击后的活动样式。

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

说明

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

样式：配置导航容器在以下状态的样式：
- 常态：默认显示样式。
- 切换：页面向下滚动时的样式。
- 悬停：鼠标指针悬停时的样式。
- 选中：导航项被选中后的活动样式。
编辑：配置导航容器的内容：
- 图片设置：设置常态和页面滚动时的 Logo 图片、鼠标悬停时显示的提示文字、单击图片后的跳转链接及打开方式。
- 导航设置：添加导航项并设置其上级导航、导航链接、打开方式和图标。
动效：设置导航控件的入场或悬停动画。
排列：设置导航容器的尺寸。

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