Breadcrumb 面包屑导航
面包屑像商场里的楼层指示牌。你不一定靠它逛完整个商场,但当你走到深层区域时,它能告诉你现在在哪一层、上一级在哪里。
关键结构图
一条横向路径从 Home 连接到 Section,再连接到 Current Page,Current Page 用更深色标出。
What
Breadcrumb 是页面顶部的小路牌,告诉用户当前页面在网站层级里的位置。
Breadcrumb 面包屑导航是一种显示当前位置与上级路径的导航辅助组件。它通常出现在页面标题上方或内容顶部,用 Home / 分类 / 当前页 这样的路径帮助用户理解信息架构。
StructureBreadcrumb = 当前页 + 上级路径 + 可返回的层级线索
When
当页面层级超过两层、用户可能不知道自己在哪个分类下,或者需要快速回到父级页面时,考虑使用面包屑。
How
先确认站点是否有清楚的层级结构,再决定面包屑显示哪些父级。路径要短,名称要和页面标题 / 分类名一致,最后一项通常是当前页,不需要再链接到自己。
Examples
文档站里,用户打开 Components / Navigation / Breadcrumb。面包屑让他知道这是组件库里的导航组件,可以回到 Navigation 或 Components。
电商分类页里,用户进入 Home / Shoes / Running Shoes。面包屑能帮他从具体商品回到跑鞋分类,而不是只能依赖浏览器后退。
来源
类型:可访问性规范 / 设计系统实践
事实线:WAI-ARIA APG 将 breadcrumb 描述为帮助用户理解当前页面在站点层级中位置的导航模式;USWDS 也把它用于层级较深的网站结构。
依据:WAI-ARIA Authoring Practices Breadcrumb Pattern、USWDS Breadcrumb guidance、Atlassian Design System breadcrumbs。
边界:适合文档站、知识库、分类页和深层管理后台;不适合替代主导航,也不适合浅层 landing page。
常见误读:不要把面包屑做成用户的浏览历史。它表达的是信息层级,不是用户刚才点击过的每一步。