一、描述,是什么

image.png
在层级结构的每个页面,显示所有父级页面链接,向上追溯到页面为止

二、目标,为什么使用

  1. 帮助用户得知当前位置
  2. 线性深入,避免了显示整个地图的复杂性
  3. 帮助用户理解层架结构并顺利导航

三、痛点,常遇见什么问题

四、时机,什么时候使用

  • 你的应用和网站超过两级以上的层级结构
  • 层级结构太深入活太复杂,全局导航不足以显示“你在这里”的位置标记
  • image.png

五、方案,类型

基本用法

image.png

带图标

image.png

带下拉菜单

image.png

🌟 设计思考

1、面包屑应该显示分层导航而不是导航历史

image.png

2、Breadcrumbs should never replace primary navigation

image.png

3、Consider condensing breadcrumbs when they get too long.

image.png

4、Separate links with an inactive character

image.png