面包屑导航（Breadcrumb）是一条被反复使用却常被做错的组件。它体量很小，却在两个关键场景里发挥不可替代的作用：用户从搜索引擎直接落到深层页面时，它回答「我在哪里」；用户想横向比较同类内容时，它提供「去哪里」。
三类面包屑，用途并不相同
- 层级型（Location）：反映网站的信息结构，如「首页 / 产品中心 / 云服务器」，适合内容有明确归属层级的站点；
- 属性型（Attribute）：反映当前对象的属性集合，如「首页 / 云服务器 / 4 核 8G」，适合电商与目录型站点；
- 路径型（Path）：记录用户的真实访问轨迹，实现复杂且对分享链接不友好，实际使用较少。
多数网站应采用层级型，因为它与 URL 结构和站点地图一致，对搜索引擎的理解也最友好。
设计要点
分隔符与视觉层级
分隔符常用斜杠或大于号，应与站内其他分隔符号保持一致。当前页通常置为不可点击的弱化文本，因为「点击自己」没有意义。
长度控制
面包屑是辅助信息，路径过长会挤占标题空间。建议限制在三到四层，超出部分在移动端折叠为省略号；同时确保路径中每一级都是用户能理解的业务名称，而不是「分类编号」。
移动端适配
窄屏下逐级平铺会换行严重，常见做法是只保留上一级加省略号，或改为可横向滚动的单行。无论哪种方式，都要保证当前位置始终可见。
与结构化数据协同
面包屑应与 BreadcrumbList 结构化数据保持一致，顺序与名称都要对应。若两者不一致，搜索引擎可能忽略标注，甚至影响富媒体结果的展示。建立内容发布流程时，应把标注更新与页面结构调整绑定在一起检查。
常见误区
- 层级与主导航不一致：用户会困惑于「到底哪条路径才是真的」，应以信息架构为准并同步修正；
- 把面包屑当成返回按钮：两者语义不同，返回应使用浏览器的返回或独立的返回入口；
- 为凑层级强行拆分：只有一层的内容不需要面包屑，硬加反而显得站内结构冗余。
一个合格的面包屑，用户几乎注意不到它，但一旦缺失，深层页面的跳出率就会上升。这正是它的价值所在。