Day 16 · Breadcrumb 面包屑导航：层级路径，一眼回上级

Breadcrumb 用来显示用户在层级结构里的当前位置，并提供回到更高层级的路径；Ant Design 对它的定义也是「显示当前所在层级位置，并允许返回上级状态」。1 换成人话说，它主要回答一个问题：我现在在哪一层？

别把 Breadcrumb 当成 Tabs 或 Stepper。Tabs 负责同层内容切换，Stepper 负责流程步骤，Breadcrumb 负责父子层级里的定位和回退。Carbon 也把 Breadcrumb 定位为辅助导航，并提醒它不应该替代主导航；如果产品只有单层导航，Breadcrumb 反而会变成多余噪音。2

常见形态可以先记两类：位置型按信息架构展示父子层级，路径型按用户实际访问路径生成。Carbon 区分了 location-based 和 path-based 两种 Breadcrumb，并建议同一个产品内保持一致。3 至于当前页要不要出现在末尾，不同设计系统会有不同默认；如果显示当前页，通常放在最后，并且不要让它看起来像可点击链接。NN/g 在桌面端指南里也给过类似建议。4

判断口诀：层级很深才上场。适合用在超过两层的信息架构、用户可能需要回到父级、内容分类比较多的页面；不适合替代主导航，也不适合塞进会换行的移动端顶部。NN/g 特别提醒，移动端 Breadcrumb 如果太小、太挤或折成多行，成本会很快超过收益。5

下一次看到「首页 › 分类 › 详情」这串小路径，可以先问一句：这里是真的有层级，还是只是想让页面看起来更完整？