返回
UI · №08 · SPECIMEN
面包屑Breadcrumbs
页面顶上那串「首页 > 分类 > 详情」层级路径当前位置导航
LIVE SPECIMEN真的能玩，点点看
你在第 4 层 —— 点上面任意祖先试试「回到该层」
先看结论
从站点根到当前页的层级路径，每个祖先可点回，当前页只是文字不是链接。
- 适合
- 层级 ≥3 层的内容站、文档站、管理后台。
- 不适合
- 只有一两层的扁平结构——没有层级可展示，放了反而占地方。
直接发给 agent
Add breadcrumbs at the top of the detail page: the hierarchy trail from Home to the current page, separated by chevrons, each ancestor clickable, current page as plain text (not a link), wrapped in <nav aria-label="Breadcrumb">.已于 2026-07-17 实测通过
技术标注2 项
- web
- <nav aria-label="Breadcrumb"> + 有序列表
- react
- <Breadcrumb>（shadcn 等）
详细说明
面包屑是给“空降用户”的定位仪——搜索引擎直达深层页面的人靠它一眼知道自己在哪、能去哪。它映射的是信息架构，所以架构混乱的站点做不出清晰的面包屑。