---
title: 面包屑 Breadcrumb
url: https://ui.zhaozimin.cn/components/breadcrumb/
markdown: https://ui.zhaozimin.cn/components/breadcrumb.md
group: 组件
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/components/v4/Breadcrumb.jsx  # https://ui.zhaozimin.cn/src/system/components/v4/Breadcrumb.jsx
  - src/system/styles/v4/base.css  # https://ui.zhaozimin.cn/src/system/styles/v4/base.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.cn/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 面包屑 Breadcrumb

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

### 样张 · 三级轨迹

React：

```jsx
import { Breadcrumb } from './components/v4/Breadcrumb.jsx'

export function Basic() {
  return (
    <Breadcrumb items={[
      { label: '综合首页', onClick: () => {} },
      { label: 'Obsidian 知识管理', onClick: () => {} },
      { label: '学习地图' },
    ]} />
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<nav
  aria-label="面包屑"
  style="
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
    color: #8b8b85;
    flex-wrap: wrap;
  "
>
  <button
    type="button"
    class="zzm-inklink"
    style="
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 20px;
      border: 0;
      background: transparent;
      padding: 4px 0;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
      text-align: left;
    "
  >
    综合首页
  </button>
  <span aria-hidden="true" style="flex: none; color: #c6c6c0">/</span>
  <button
    type="button"
    class="zzm-inklink"
    style="
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 20px;
      border: 0;
      background: transparent;
      padding: 4px 0;
      cursor: pointer;
      font-family: inherit;
      font-size: inherit;
      text-align: left;
    "
  >
    Obsidian 知识管理
  </button>
  <span aria-hidden="true" style="flex: none; color: #c6c6c0">/</span>
  <span
    aria-current="page"
    style="
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 20px;
      color: #161616;
      font-weight: 600;
    "
  >
    学习地图
  </span>
</nav>
```

### 样张 · 窄处不换行

调用方传 flexWrap: nowrap + overflow: hidden，每项按剩余空间省略

React：

```jsx
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>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div style="width: 240px">
  <nav
    aria-label="面包屑"
    style="
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      font-size: 12px;
      color: #8b8b85;
      flex-wrap: nowrap;
      overflow: hidden;
    "
  >
    <button
      type="button"
      class="zzm-inklink"
      style="
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 20px;
        border: 0;
        background: transparent;
        padding: 4px 0;
        cursor: pointer;
        font-family: inherit;
        font-size: inherit;
        text-align: left;
      "
    >
      综合首页
    </button>
    <span aria-hidden="true" style="flex: none; color: #c6c6c0">/</span>
    <button
      type="button"
      class="zzm-inklink"
      style="
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 20px;
        border: 0;
        background: transparent;
        padding: 4px 0;
        cursor: pointer;
        font-family: inherit;
        font-size: inherit;
        text-align: left;
      "
    >
      Obsidian 知识管理
    </button>
    <span aria-hidden="true" style="flex: none; color: #c6c6c0">/</span>
    <span
      aria-current="page"
      style="
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 20px;
        color: #161616;
        font-weight: 600;
      "
    >
      双链与反向链接：让想法第一次连起来
    </span>
  </nav>
</div>
```

## 属性

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

## 规格

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

## 铁律

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

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* base.css */

.zzm-v4 .zzm-inklink { color: inherit; transition: color .16s ease; }

.zzm-v4 .zzm-inklink:hover { color: #161616; }

.zzm-v4 .zzm-inklink:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(166, 64, 47, .2); }
```

---

上一页：[徽章与档位](https://ui.zhaozimin.cn/components/badge.md) · 下一页：[标签页](https://ui.zhaozimin.cn/components/tabs.md) · 全站目录：https://ui.zhaozimin.cn/llms.txt