breadcrumb.md
组件 · COMPONENT

面包屑 Breadcrumb

层级轨迹：灰字可点、悬停变墨，末项是墨色加粗的当前页，斜杠分隔。全站课程页把它钉在顶栏。

来源设计系统源码源components/v4/Breadcrumb.jsx源styles/v4/base.css机读components/breadcrumb.md
三级轨迹
import { Breadcrumb } from './components/v4/Breadcrumb.jsx'

export function Basic() {
  return (
    <Breadcrumb items={[
      { label: '综合首页', onClick: () => {} },
      { label: 'Obsidian 知识管理', onClick: () => {} },
      { label: '学习地图' },
    ]} />
  )
}
窄处不换行调用方传 flexWrap: nowrap + overflow: hidden，每项按剩余空间省略
import { Breadcrumb } from './components/v4/Breadcrumb.jsx'

export function Narrow() {
  return (
    <div style={{ width: 240 }}>
      <Breadcrumb
        style={{ flexWrap: 'nowrap', overflow: 'hidden' }}
        items={[
          { label: '综合首页', onClick: () => {} },
          { label: 'Obsidian 知识管理', onClick: () => {} },
          { label: '双链与反向链接：让想法第一次连起来' },
        ]}
      />
    </div>
  )
}

属性

属性取值默认说明
items[{ label, onClick? }][]有 onClick 渲染为可点按钮；没有的是当前页（aria-current）；null 项自动过滤
styleobject—并入 nav 容器；窄处传 flexWrap / overflow

规格

12px · 项色 #8B8B85（由容器继承）· 分隔符 #C6C6C0 · 当前项 #161616 / 600 · 间距 8 · 行高 20。可点项用 .zzm-inklink：基色 inherit，悬停变墨，键盘焦点朱色光晕。

铁律

✓ 要颜色交给容器继承
✗ 不要在项上写内联 color——它会压死 :hover
✓ 要轨迹由页面自己组，组件只管长相