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.