“the home slash section slash current page links”「「首页 / 栏目 / 当前页」那样的链接」
“the trail above a page title”「页面标题上面那条路径」
“links showing where you are in the site”「显示你在网站哪个位置的链接」
“the folder path style navigation”「像文件夹路径那样的导航」
“the row with chevrons between page names”「页面名之间夹着小箭头的那一行」
标本可交互，可以直接操作。
Anatomy — every part, named解剖 —— 每个部件的名字
1Breadcrumb separator面包屑分隔符aria-hidden="true"
“The little slash or chevron between page names” is the breadcrumb separator.
「页面名之间的小斜杠或小箭头」就是面包屑分隔符。
Prompt fragmentPrompt 片段
an aria-hidden="true" decorative breadcrumb separator between hierarchy links
层级链接之间的装饰性面包屑分隔符，标 aria-hidden="true"
2Current-page crumb当前页面包屑aria-current="page"
“The last page name that is not a link” is the current-page crumb.
「最后一个不是链接的页面名」就是当前页面包屑。
Prompt fragmentPrompt 片段
the final breadcrumb marked aria-current="page", styled as the current location rather than a link
最后一项面包屑标 aria-current="page"，样式是当前位置而非链接
3Collapsed ancestors折叠的上级BreadcrumbEllipsis
“The three dots hiding the middle of the path” are collapsed ancestors.
「把路径中间藏起来的三个点」就是被折叠的上级。
Prompt fragmentPrompt 片段
a BreadcrumbEllipsis standing in for low-value middle ancestors while root and current page remain visible
一个 BreadcrumbEllipsis，代替价值低的中间上级，根层级和当前页保持可见
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Add breadcrumbs inside a <nav aria-label="Breadcrumb">, linking each ancestor and marking the final item aria-current="page". Collapse low-value middle ancestors into an ellipsis when space is tight while keeping the current page visible.
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my breadcrumbs (nav aria-label=breadcrumb, aria-current=page). Rule out: separators typed into the markup so screen readers announce every slash — draw them with CSS pseudo-elements; aria-current missing from the last crumb; long trails needing middle-crumb collapse instead of wrapping to two lines; the current page rendered as a link to itself. The symptom:
# Breadcrumbs · 面包屑导航 Breadcrumbs
UI reference — https://K3tty5555.github.io/LearnUI_PM/web/breadcrumbs/
**A hierarchy trail from the current page back to its ancestors**
一条从当前页面回溯到各级上级的层级路径
**Also called / 也叫:** breadcrumb trail, path navigation, hierarchy trail / 面包屑路径、路径导航、层级路径
## Anatomy — every part, named / 解剖
1. **Breadcrumb separator · 面包屑分隔符** (`aria-hidden="true"`)
“The little slash or chevron between page names” is the breadcrumb separator.
「页面名之间的小斜杠或小箭头」就是面包屑分隔符。
Prompt fragment: an aria-hidden="true" decorative breadcrumb separator between hierarchy links
2. **Current-page crumb · 当前页面包屑** (`aria-current="page"`)
“The last page name that is not a link” is the current-page crumb.
「最后一个不是链接的页面名」就是当前页面包屑。
Prompt fragment: the final breadcrumb marked aria-current="page", styled as the current location rather than a link
3. **Collapsed ancestors · 折叠的上级** (`BreadcrumbEllipsis`)
“The three dots hiding the middle of the path” are collapsed ancestors.
「把路径中间藏起来的三个点」就是被折叠的上级。
Prompt fragment: a BreadcrumbEllipsis standing in for low-value middle ancestors while root and current page remain visible
## Prompt / 提示词
Add breadcrumbs inside a <nav aria-label="Breadcrumb">, linking each ancestor and marking the final item aria-current="page". Collapse low-value middle ancestors into an ellipsis when space is tight while keeping the current page visible.
在 <nav aria-label="Breadcrumb"> 里加面包屑导航：每个上级都做成链接，最后一项标 aria-current="page"。空间紧张时把价值低的中间层级收进省略号，但当前页要始终可见。
## Debug prompt / 调试提示词
Debug my breadcrumbs (nav aria-label=breadcrumb, aria-current=page). Rule out: separators typed into the markup so screen readers announce every slash — draw them with CSS pseudo-elements; aria-current missing from the last crumb; long trails needing middle-crumb collapse instead of wrapping to two lines; the current page rendered as a link to itself. The symptom:
调试我的面包屑导航（nav aria-label=breadcrumb、aria-current=page）。排查：分隔符直接写进了标记里，屏幕阅读器会把每个斜杠都念出来——应该用 CSS 伪元素画；最后一项漏了 aria-current；路径太长时该折叠中间层级，而不是折成两行；当前页被渲染成了指向自己的链接。症状：
## In code / 代码里叫什么
- **HTML** `<nav>`
- **ARIA** `aria-label="Breadcrumb"`
- **ARIA** `aria-current="page"`
- **shadcn/ui** `Breadcrumb`
