Breadcrumb 面包屑

显示当前页面在站点层级里的位置，并能一步跳回上面任意一级。pt-breadcrumb 是外层导航， 每一级是一个 pt-breadcrumb-item。

基础用法

能跳转的层级在项里写 <a>（或框架的 Link 组件），最后一级写 current。分隔符自动画在相邻两项之间。

<pt-breadcrumb>
  <pt-breadcrumb-item>
    <a href="#">首页</a>
  </pt-breadcrumb-item>
  <pt-breadcrumb-item>
    <a href="#">组件</a>
  </pt-breadcrumb-item>
  <pt-breadcrumb-item current>面包屑</pt-breadcrumb-item>
</pt-breadcrumb>

折叠项

ellipsis 画一个「…」代表被省略的几级，读屏念 label（缺省「更多」）。

<pt-breadcrumb>
  <pt-breadcrumb-item>
    <a href="#">首页</a>
  </pt-breadcrumb-item>
  <pt-breadcrumb-item ellipsis></pt-breadcrumb-item>
  <pt-breadcrumb-item>
    <a href="#">组件</a>
  </pt-breadcrumb-item>
  <pt-breadcrumb-item current>面包屑</pt-breadcrumb-item>
</pt-breadcrumb>

文字分隔符

separator 换成文字分隔符；它只是装饰，读屏不念。

<pt-breadcrumb separator="/">
  <pt-breadcrumb-item>
    <a href="#">首页</a>
  </pt-breadcrumb-item>
  <pt-breadcrumb-item current>面包屑</pt-breadcrumb-item>
</pt-breadcrumb>

链接

能跳转的层级在项里写一个 <a>：<pt-breadcrumb-item><a href="/docs">文档</a></pt-breadcrumb-item>。 用客户端路由时直接放框架的链接组件（React Router / Next 的 <Link>、Vue Router 的 <RouterLink>、 Angular 的 <a routerLink>），它们渲染出来的也是 <a>，样式照样生效。

项本身不生成链接（没有 href 属性）：项是光 DOM 元素，替使用方把文字包进一个组件自己建的 <a>， React / Vue 水合时会报子节点对不上；而客户端路由本来也需要框架自己的 Link。

最后一级（当前页）写 current，不放链接：宿主带 aria-current="page"，文字 strong 色、500 字重。

分隔符

相邻两项之间自动画分隔符，不用写分隔元素。缺省是 14px 的右向箭头（RTL 下翻转）， separator="/" 换成文字；separator="" 只留间距。分隔符只是装饰，读屏不念。

折叠项

<pt-breadcrumb-item ellipsis> 画一个 32×36 的「…」，代表中间被省略的几级，读屏念 label（缺省「更多」）。 它只是展示；要能点开看被省略的层级，在一个普通项里放 pt-menu，触发元素用带读屏名的图标按钮。

样式

pt-breadcrumb-item 是光 DOM 元素（没有 Shadow DOM），样式在全局样式表 ptengine-ui.css 里， 选择器包 :where()：业务直接在项或项里的 <a> 上写 className 就能盖过默认的颜色、字重与悬停色， 不需要 ::part()。分隔符与折叠图标是项的 ::before / ::after，同样可以直接覆盖。

pt-breadcrumb 自己有影子树（只有一层列表容器，part="list"）。字号 13/20、weak 色写在宿主上， 经继承落到各项；在宿主上写 className 就能改。间距用 --pt-breadcrumb-gap（缺省 6px，视口 ≥640px 时 10px）， 分隔符颜色用 --pt-breadcrumb-separator-color（缺省 weak 色，当前页的加深不影响它）。

无障碍

• 宿主是导航地标（role="navigation"），读屏名取 label，缺省「面包屑」/ "Breadcrumb"（跟随 lang 与全局 locale）。
• 影子树里有一层 role="list"，各项是 role="listitem"：读屏会念出「第 N 项，共 M 项」。
• 当前页带 aria-current="page"。分隔符与折叠图标是装饰，不进无障碍树；折叠项的 label 经伪元素的替代文本念出。
• 触屏（粗指针）下链接本身撑到 44 × 44、文字居中，命中区就是链接的盒子：同行相邻与换行后上下两行都不会串点。代价是触屏上每行高 44、短链接两侧留白变大。

服务端渲染

pt-breadcrumb 照常以 Declarative Shadow DOM 送达。pt-breadcrumb-item 的内容常是直接文本， 与 pt-kbd 一样不走 Stencil 的服务端渲染（直接文本会被换成注释），由框架原样输出，首屏文字就在、 样式来自全局样式表；Next.js 的 Server Component 里从 @ptengine/ui-react/ssr 照常导入 PtBreadcrumbItem。

API

属性

属性	Attribute	类型	默认值	说明
label	label	string | undefined	—	导航地标的读屏名。缺省取内置文案（「面包屑」/ "Breadcrumb"）
separator	separator	string | undefined	—	分隔符文字，如 `/`、`·`。缺省画右向箭头图标。分隔符只是装饰，读屏不念。 写成空串就只留间距、不画分隔符。

插槽

名称	说明
（默认）	若干 pt-breadcrumb-item

可定制的内部元素（::part()）

part	说明
list	列表容器（flex 换行排列各项）

pt-breadcrumb-item

属性

属性	Attribute	类型	默认值	说明
current	current	boolean	false	当前页：宿主带 `aria-current="page"`，文字 strong 色、500 字重。只给最后一级，里面不放链接
ellipsis	ellipsis	boolean	false	折叠项：画一个 32×36 的「…」图标，代表中间被省略的几级。不写内容， 读屏念 `label`。它只是展示；要能点开看被省略的层级，在一个普通项里放 pt-menu， 触发元素用带读屏名的图标按钮。
label	label	string | undefined	—	折叠项的读屏文字。缺省取内置文案（「更多」/ "More"）；非折叠项上不起作用

插槽

名称	说明
（默认）	这一级的文字，或一个 `<a>`