组件 / 导航
面包屑 Breadcrumb
面包屑是辅助导航模式，用于识别页面在层次结构内的位置，并根据需要向上返回。
基本属性
组件定义
面包屑是辅助导航组件，帮助用户定位当前位置，允许用户向上返回。
组件构成
面包屑组件由文字标签、分隔符组成。
| 构成元素 | 说明 |
|---|---|
| 1. 文字标签 | 用以表示页面名称。文字标签可替换为图标。 |
| 2. 分隔符 | 用以分隔每级页面，默认分隔符为（/）。可以将面包屑的默认分隔符替换为其他具有分隔或指示作用的元素，如：向右箭头（>)、实心圆点（·）等 |
组件尺寸
可根据实际业务中定义面包屑的尺寸。常见的有 14px、12px 两种尺寸。
如何定义面包屑的尺寸？
面包屑对用户起到辅助导航作用，因此它不应该成为用户到达页面后被吸引关注力的第一项内容，面包屑的尺寸应至少小于主要导航菜单。
组件状态
| 元素 | 状态 |
|---|---|
| 1. 父级页面 | 默认情况下，父级页面均为可点击跳转的链接 |
| 2. 分隔符 | 不可点击 |
| 3. 当前页面 | 不可点击 |
何时使用
多层级网站
当你的网站存在两个及以上的页面层级，并且是分类清晰明确的多层级结构时，应当使用面包屑辅助用户进行页面之间的导航。
带有下拉菜单的面包屑
展示出父级页面的相关页面，在使用户了解自己位置的同时，又可以方便用户更快的访问到整个站点，提供了更灵活的导航方式。
省略菜单的使用
当空间有限时（例如出现五级以上的面包屑），使用省略菜单来截断面包屑。通常显示首页与两个页面标签，其余面包屑被收起在省略菜单中。
何时不使用
面包屑与返回按钮
当页面层级很浅的时候（例如只有两级），推荐使用返回按钮，可不使用面包屑。通常情况下，有返回按钮的页面，不推荐使用面包屑组件。
面包屑不应替换全局导航
面包屑作为辅助导航模块，不应取代全局导航栏，仍应使用常规导航菜单。
如果需要引导用户执行多步骤流程，请使用步骤条 steps。
面包屑作为导航组件，不应使用在引导用户多步骤操作的场景下，此时应使用步骤条组件。
布局
面包屑位于页面或模块的左上角，同时应位于页面中的主要导航或标题之下。
文案指南
面包屑的文本标签尽量简短明确，各级页面名称应当简短并准确反映页面内容，应尽量避免使用过长的文本内容。
若面包屑文本标签过长时，可采用两种使用方式：
1. 文本标签截断
使用省略号截断内容 ，鼠标 hover 后使用 tooltip 展示全部内容。
2. 较短的替代项
使用较短的替代项来避免冗长文本标签的面包屑。
交互行为
鼠标点击 默认情况下，面包屑的分隔符和当前页面均不可点击；在加入链接的面包屑中，可以点击链接来跳转至对应的页面。
关联组件
小历史故事 🎀
关于面包屑的童话故事：很久很久以前，当兄弟姐妹Hansel和Gretel被他们的极度贫困的父母遗弃在树林中时，他们想到了一种巧妙的方式找到回家的路：丢下面包屑。没想到鸟最终吃掉了面包碎片，导致两个失散的孩子被绑架了，几乎被一个老巫婆煮熟了。