---
title: 面包屑
slug: 面包屑
category: 组件
figma_node_id: 1:12
figma_page_name: ＞面包屑
aliases: [Breadcrumb, 路径导航, 层级导航]
last_extracted: 2026-05-19
status: ok
---

# 面包屑

> 表达当前页面在层级结构中所处位置的路径导航控件。文字显示 10 个有效字符，含默认 / 悬浮 / 点击 / 选中四种状态；按高度分大（60px）与小（48px）两档号型。

## 类型与号型

### 按尺寸分类

| 号型 | 高度 | 字号 | 应用场景 |
|---|---|---|---|
| 大号 | 60 px | 16 | 框架级 / 顶部主导航位置的面包屑 |
| 小号 | 48 px | 12 | 内容区 / 二级页内的面包屑 |

> 大：高度 60，字号 16。
> 小：高度 48，字号 12。

## 尺寸规格

- 桌面端画板：1280 × 1532 px
- 单条面包屑容器宽度：880 px（在大尺寸 / 小尺寸示例中保持一致）
- 大尺寸单条高度：60 px
- 小尺寸单条高度：48 px
- 选项行高度（其他变体）：47–60 px 区间

## 状态

文字最多显示 10 个有效字符，覆盖四种状态：

| 状态 | 含义 |
|---|---|
| 默认（default） | 路径节点的常态展示 |
| 悬浮（hover） | 桌面端鼠标悬停反馈 |
| 点击（pressed / down） | 鼠标按下反馈 |
| 选中（selected） | 当前所处层级的高亮态（一般是路径末端节点） |

> 文字显示 10 个有效文字，含默认、悬浮、点击、选中 4 种状态。

## 颜色与 token

| 用途 | hex | token 名 |
|---|---|---|
| 页面背景 | `#FFFFFF` | `color-bg-1 / White` |
| 容器底色（示例区） | `#F7F8FA` | `C-Coolgray20` 通用可点击区域底色 |
| 主标题文字（"面包屑导航状态及交互"） | `#1C1D1F` | 接近 `color-text-1`，24px Semibold |
| 正文 / 说明文字 | `#11141A` | 14px Regular |
| 装饰渐变（顶部光晕） | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 与按钮 / 步骤条同款主色光晕 |

（面包屑的选中态主色与分隔符颜色未在本页 globalVars 中以独立 fill 给出，常规使用主色 `Brandblue60 #165DFF` 表达当前层级强调，使用 `C-Coolgray60 #878D99` 表达层级分隔符 `/` 或 `>`。）

> 关联色彩 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- 大号面包屑容器：880 × 60 px，左内边距与小号一致
- 小号面包屑容器：880 × 48 px
- 示例标题位置：(160, 332)，宽 240 px / 高 24 px
- 字体规范：
  - 标题（页面主标题）：PingFang SC Semibold 24px / 行高 24px
  - 正文 / 状态说明：PingFang SC Regular 14px / 行高 20px
  - 面包屑节点文字（大号）：16px
  - 面包屑节点文字（小号）：12px

## 文案规则

- **每个节点文字最多 10 个有效字符**，超出截断
- 路径节点命名应与目标页面标题保持一致
- 不使用 emoji / 符号美化路径节点
- 层级深度建议控制在 3–5 层以内；超过 5 层应考虑收起中间层为 `…`

## 交互行为

- **默认态**：节点显示为可点击文字，视觉弱化于选中节点
- **悬浮态**：鼠标移上时节点文字加亮 / 加下划线
- **点击态**：鼠标按下瞬时反馈
- **选中态**：当前所处层级高亮，通常为路径末端节点，且不可点击（点击自身无跳转）
- 点击非选中节点：跳转到对应层级页面
- 路径节点之间使用分隔符（如 `/` 或 `>`）分隔

## 示例

![桌面端面包屑总览](../图片/组件/面包屑/desktopbreadcrumboverview.png)
![面包屑导航状态与交互](../图片/组件/面包屑/breadcrumbnavstateyu-jiao-hu.png)
![面包屑大号-60px](../图片/组件/面包屑/breadcrumblarge-60px.png)
![面包屑小号-48px](../图片/组件/面包屑/breadcrumbsmall-48px.png)
![面包屑状态-默认](../图片/组件/面包屑/breadcrumbstate-default.png)
![面包屑状态-悬浮](../图片/组件/面包屑/breadcrumbstate-hover.png)
![面包屑状态-点击](../图片/组件/面包屑/breadcrumbstate-dian-ji.png)
![面包屑状态-选中](../图片/组件/面包屑/breadcrumbstate-selected.png)

## 设计考量 / 原文摘录

> 文字显示 10 个有效文字，含默认、悬浮、点击、选中 4 种状态。
>
> 大：高度 60，字号 16。
> 小：高度 48，字号 12。

- **字数硬上限 10 个有效字符**：避免节点宽度过大导致路径横向溢出
- **两档号型分场景**：大号承担框架级强提示，小号承担内容区内的轻量定位
- **四态完整覆盖**：默认 / 悬浮 / 点击 / 选中，确保桌面端交互反馈链路完整

## 不推荐用法

- 节点文字超过 10 个字符不截断
- 在移动端单手操作场景使用面包屑（推荐改用 [导航菜单](导航菜单.md) 的返回按钮）
- 路径深度 > 5 层（建议中间层折叠为 `…`）
- 当前选中节点设置为可点击且跳转回自身
- 面包屑与 [步骤条](步骤条.md) 同时出现在同一区域（导航语义会冲突）

## 关联

- 当前页面层级在导航栏的呈现见 [导航菜单](导航菜单.md)
- 多步流程的位置指示见 [步骤条](步骤条.md)
- 路径节点的下拉折叠折回展开见 [下拉菜单](下拉菜单.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
- 字体规格见 [字体](../基础/字体.md)
