← 全部模板

路径面包屑 <PathCrumbs />

一排箭头形面包屑（名称 + 等宽小字），最后一节（或 focus 指定的一节）填强调色；每节下方一张说明卡，用细线连着。

在示例演示里查看 →

分组: 关系 · 上下游与流转
组件: PathCrumbs · #path-crumbs
交互: build 模式下每按一次 → 一节面包屑和它的卡片一起出现

适合

上游到下游、源头到成品这种单向链条
3–5 个环节，每个环节一两句话

不适合

有分叉或回路：用 FlowDiagram 或 NodeGraph
每步要写很多：用 StepTrack

内容上限

1	crumbs 3–5 个
2	label ≤ 8 字或 ≤ 14 个拉丁字符（5 个时 ≤ 10 个拉丁字符）
3	sub ≤ 16 个字符
4	body ≤ 50 字；tag ≤ 8 字

字段

字段	类型
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`crumbs` · 必填	`{ label, sub?, body, tag? }[]`	环节，上游在前
`focus`	`number`	高亮的环节，默认最后一个

示例代码

<PathCrumbs kicker="和 RHEL 的关系" title="Fedora 是上游" crumbs={[{ label: 'Rawhide', sub: 'Fedora 开发树', body: '…' }, { label: 'ELN', … }, …]} />