Breadcrumbs 面包屑导航 Breadcrumbs web

A hierarchy trail from the current page back to its ancestors

一条从当前页面回溯到各级上级的层级路径

also called也叫: breadcrumb trail, path navigation, hierarchy trail面包屑路径、路径导航、层级路径
If you called it…如果你管它叫……: “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”「页面名之间夹着小箭头的那一行」

标本可交互 —— 点点看。Specimen is live — try it.

Anatomy — every part, named解剖 —— 每个部件的名字

1 Breadcrumb 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"
2 Current-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"，样式是当前位置而非链接
3 Collapsed 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.

在 <nav aria-label="Breadcrumb"> 里加面包屑导航：每个上级都做成链接，最后一项标 aria-current="page"。空间紧张时把价值低的中间层级收进省略号，但当前页要始终可见。

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:

调试我的面包屑导航（nav aria-label=breadcrumb、aria-current=page）。排查：分隔符直接写进了标记里，屏幕阅读器会把每个斜杠都念出来——应该用 CSS 伪元素画；最后一项漏了 aria-current；路径太长时该折叠中间层级，而不是折成两行；当前页被渲染成了指向自己的链接。症状：

In code代码里叫什么

Framework框架	Symbol符号	Note说明
HTML	<nav>
ARIA	aria-label="Breadcrumb"
ARIA	aria-current="page"
shadcn/ui	Breadcrumb

Anatomy — every part, named解剖 —— 每个部件的名字

Prompt — paste into your agentPrompt —— 直接粘贴给你的代理

Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时

In code代码里叫什么

See also相关词条