你可能会说
页面顶部加一串能点着往回走的层级链接
页面顶部告诉你现在身处哪一层的那串链接
看一眼它长什么样
上面这些交互全部由 CSS 完成，没有加载任何脚本 —— 和真实产品里的组件是同一个道理。
大白话解释
面包屑导航是页面靠上位置那一小行淡淡的文字，通常长这样：首页，然后一个斜杠，再是分类，再一个斜杠，最后是当前页面。每个词都能点，点了就回到那一层。
名字来自童话里撒面包屑认路的情节，作用一模一样：让你在层层嵌套的网站里知道自己是怎么走到这里的，随时能原路退回去。
它看着不起眼，却是深层页面的救命稻草。想象你从搜索直接进到某件商品的详情页，没有这行字，你只能按浏览器返回键一步步瞎退，或者重新去首页翻。
什么时候会遇到
- 看详情页设计稿时，标题上面还有一行小字，写着首页加分类再加当前页。
- 产品说这个分类层级很深，用户容易迷路，让你在顶部补一条路径。
- 发现当前页那一节也被做成了链接，点了等于原地刷新，应该做成不可点。
- 手机上路径太长放不下一行，纠结是折行还是把中间几层收起来。
- 跟 Agent 沟通时你说页面顶部那条从哪来的路径，对方得先确认是不是面包屑。
可以直接对 Agent 说
「给商品详情页顶部加一条面包屑，依次是首页、手机数码、当前商品名，前面两项可以点着往回跳，最后一项是当前页不要做成链接。」
「面包屑在手机上太长了会挤成两行，帮我把中间层级收成一个省略号，点省略号再展开完整路径。」
「这条面包屑的颜色太深了，抢了页面标题的视线，帮我调成浅灰色，鼠标移上去才变深而且带下划线。」
最容易想岔的地方
常见的错误理解： 面包屑就是网站路径，和浏览器地址栏里那个是一回事
更准确的理解： 面包屑表达的是内容之间的从属关系，未必和网址层级一致。而且它得能点着往上跳，不是一行死文字
常见的错误理解： 面包屑是给老用户看的，新人用不上
更准确的理解： 从搜索结果直接落到深层页面的新人最需要它 —— 他们没经过首页，只能靠这行字判断自己现在在哪
测一下：真遇到了你会怎么处理
单选 · 选完立刻看解释
用户正在「手机 › 配件 › 充电宝」这个页面。
面包屑在这里解决什么问题？
-
面包屑是位置指示 + 向上回退的通道。用户在深层级里最容易失去方向感，它补的就是这个。
-
那是导航菜单的职责。面包屑只反映当前这一条路径，不是全站地图。
-
面包屑只能沿着已有层级往上退，没法跳到一个不相干的地方。要随便去哪儿得靠搜索。
题目只考「这个场景下的第一反应」，不考名词背诵 —— 面包屑导航的定义在上面已经讲过了。