ant-design/docs/pattern/navigation.md

导航

• category: 1
• order: 1

---

在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意：

1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路；
2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。

常见导航

我们将常见的导航模式分为：侧栏导航和顶部导航，两者各有优缺点，设计者可以根据各自的业务需求进行选择。

侧栏导航

导航的结构由以下几部分组成。

1. 产品 Logo 和名称。
2. 业务类目。
3. 登陆工具。
4. 面包屑（可选）。

注：

1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时；
2. 面包屑可以分为这几类：

• 路径型：是一个动态显示用户到达页面经过的途径。
• 位置型：位置型是固定的，显示了页面在网站结构中的位置。
• 属性型：属性型给出当前页面的分类信息。

我们定义了不同类目层级所对应的导航样式。

顶部导航

结构如右图所示：

1. 产品 Logo 和名称。
2. 业务类目。
3. 登陆工具。
4. 面包屑（可选）。

不同类目层级。