返回知识库界面与交互 · 导航结构
面包屑Breadcrumb
显示当前位置层级、并能逐级回退到祖先范围的路径导航。
进入更深层追加一级，点祖先截断回退
面包屑是一串反映当前位置层级的路径：每往里走一步追加一级，点任意上级截断回该级，最后一级是当前页。
第 0 步：这是一个可进入/可回退的微型订单后台。点内容区里的分类或订单进入更深层， 面包屑会追加一级；点面包屑里任一祖先，截断回退到该级，内容区一起切换。
当前位置：待发货订单（第 3 级）。进入更深层，面包屑追加一级——原因是层级变深；点面包屑任一祖先，对照回退并截断到该级；下一步可继续进入、返回或复制当前路径。
三件事：层级、当前页、可逐级回退
刚才面板里发生的事，命名成三条可复述的规则。
- 层级随位置变长或变短。进入更深层→末尾追加一级；点祖先→截断到该级。面包屑永远反映「现在在哪」。
- 最后一级是当前页，不是链接。用
aria-current="page" 标记，ink 加粗，不设 href；前面各级才是可点回的祖先链接。 - 每一级都能回到，长路径可折叠。窄屏下中间级收成「…」，首级和倒数第二级仍可见，点「…」展开后每层可达。
什么时候该用面包屑
出现以下信号时，面包屑能帮上忙；不在这些场景里硬塞反而冗余。
- 多层级内容：后台、文档站、商品分类、文件管理——页面有清晰的「父→子」从属关系。
- 用户会想「我怎么到这儿了」：从搜索、外链或筛选页跳进深层，需要位置感和逐级回退。
- 和主导航分工：主导航切换大栏目，面包屑在同一栏目内标深度。全站只有两层、或只是平级标签切换时，不必用面包屑。
怎么用好一条面包屑
从结构到交互的最短路径，每一步都能被辅助技术理解。
- 用
<nav aria-label="面包屑"> 包住，里面用 <ol>/<li> 表达顺序，不用纯 <div>。 - 祖先渲染成真实链接，指向该级页面；当前页用
<span aria-current="page">，不设误导性的 href。 - 分隔符（
/ 或 ›）只是装饰，用 aria-hidden 或 CSS 生成，别让它进入朗读顺序。 - 层级超过 3 级时折叠中间项，提供「…」展开按钮并写
aria-expanded / aria-controls。
正反例：当前页该不该是链接
同一目标——显示一条到当前页的路径；只改一个关键选择：最后一级是不是链接。
正例：当前页用 aria-current=page，不做链接当前页 ink 加粗、不带 href，aria-current=page 标记「这是位置」；用户不会误以为是跳转入口。
反例：当前页也设成可点链接当前页做成下划线链接，用户以为能跳转，点了原地刷新或无反馈；同时丢了 aria-current 的「当前」语义。
快速自测
你在做「帮助中心 / 账号 / 登录问题 / 第 123 号工单」页面。面包屑里「第 123 号工单」这一级该怎么处理？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。