跳到主要内容
Termlib

UI 组件 · 导航

面包屑

Breadcrumb

也叫：面包屑导航、路径导航、层级导航、Breadcrumbs

显示当前页面在网站层级中所处位置的一行路径，例如「首页 / 商品 / 详情」，可点击返回上级。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在内容区顶部、页面标题上方放一行面包屑，显示「首页 / 订单管理 / 订单详情」。前两级是可点击的灰色链接，悬停时变深并出现下划线；最后一级是当前页，用深色文字且不可点击。层级超过 4 级时，中间几级折叠成省略号。

发给

01判断

你的内容是这样吗？

对照两列，确认面包屑是不是你要找的。

符合这些情况，用面包屑

  • 网站有三级或更深的页面层级，用户需要知道当前页属于哪个分类时
  • 用户常从搜索或外部链接直接进入深层页面，需要一键回到上级时
  • 后台系统的详情页、编辑页，需要快速返回所属列表页时

是这些情况，换成别的

  • 网站只有一两级页面，面包屑只会重复页面标题

  • 表示注册、下单这类流程的进度

    改用步骤条

  • 作为网站唯一的导航方式，它无法列出同级的其他栏目

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    最后一项（当前页）也做成可点击链接，点了只是原地刷新

  2. 02

    用面包屑表示分步表单的进度，把页面层级和操作流程混为一谈

  3. 03

    路径写死成固定文字，不随实际页面层级变化

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由一串按层级排列的链接和分隔符（斜杠或箭头）组成，最后一项是表示当前页的纯文字。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1内容区顶部一行字号较小的灰色文字
  2. 2文字之间用「/」或「>」分隔
  3. 3最后一项颜色更深、不可点击

04解释

详细解释

面包屑是一行用斜杠或箭头隔开的链接，从首页一路排到当前页，例如「首页 / 订单管理 / 订单详情」。前面每一级都能点击直接跳回，最后一级是当前页面，只显示文字，不能点。

它只回答「我在哪、上一级是什么」，不负责列出所有栏目，所以总是搭配顶部导航栏或侧边菜单使用，放在内容区顶部、页面标题上方。层级只有一两级的网站用处不大。

面包屑和步骤条长得有点像，都是一排用箭头连起来的文字。区别是面包屑表示页面在层级里的位置，步骤条表示一个流程做到了第几步，两者不能互换。

开发者信息
术语 ID
component-breadcrumb
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • nav[aria-label*="breadcrumb" i]
  • ol[itemtype*="BreadcrumbList"]
  • .breadcrumb
  • .ant-breadcrumb
  • .el-breadcrumb
  • [class*="MuiBreadcrumbs-root"]
  • .arco-breadcrumb
  • .t-breadcrumb
  • .n-breadcrumb
  • [data-slot="breadcrumb"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • breadcrumb
  • breadcrumbs
  • crumbs
  • bread-crumb
  • breadcrumb-nav
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Breadcrumb
  • Breadcrumbs
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30