Breadcrumb

面包屑

A one-line trail — Home / Category / Current — showing your level and letting you jump back up.

WebDesktopNavigationContent areaComponent

大白话说明

面包屑把当前页在网站层级中的位置摊开成一行可点的路径,每一级都是链接,当前页不可点。它占地极小,却同时解决了「我在哪」和「怎么回上层」。

什么时候用

层级 ≥3 的内容型网站:文档、电商分类、后台多级页面。

什么时候不用

层级只有 2 层、或流程型页面(结算、表单向导)别用——前者多余,后者会诱使用户跳步。

细节与变体

  • 移动端空间紧时只保留上一层加一个返回箭头
  • 当前页用正文色、祖先级用弱化色并带下划线 hover
  • 层级太深时中间折叠成「…」,点开再展开

Matching prompt (fill in & copy)

Reference implementations (open source)

  • Primer ↗ MIT · 免费(MIT)

    GitHub's own design system — restrained and engineering-minded.

  • Carbon Design System ↗ Apache-2.0 · 免费(Apache-2.0)

    IBM's design system — a benchmark for token systems and data-dense interfaces.

  • Ant Design ↗ MIT · 免费(MIT)

    The de-facto standard for admin interfaces in China — tables, forms, lists.