界面图鉴
面包屑Breadcrumb
你可能会问
面包屑到底是什么？页面顶上那行带斜杠的小字有什么用？
简单来说
一行层级路径，显示你在站点的第几层，每一层都能点回去。
01 · 拆开看看
这一块由什么组成
名字来自《糖果屋》：一路撒面包屑，随时找得到回去的路。它显示你在站点层级里的位置，每一层都能点回去。组成：
层级链接Trail
从首页到当前的每一层，都可以点。
分隔符Separator
斜杠或小箭头，把层级隔开。
当前页Current
最后一项是你所在的页面，通常不可点、颜色更深。
02 · 常见变体
同一个零件，几种摆法
首页 / 分类 / 当前，最经典。
用 › 分隔，方向感更强。
层级太深时中段收成 …。
03 · 火眼金睛
这个文档站里，哪一块是面包屑？
四个都在帮你找路，分工完全不同。
点一块试试，看看它叫什么
导航栏Navbar
不是它。顶部那条管全站大板块，是导航栏。
侧边栏Sidebar
不是它。左侧竖排的目录是侧边栏，管板块内部的层级。
面包屑Breadcrumb
就是它！一行层级路径，标记你在第几层，每层可点回去。
分页Pagination
不是它。底部的页码是分页，翻的是同层内容，不改变层级。
04 · 用与不用
什么时候该上它
适合
- 层级三层以上的站点
- 用户常从搜索、分享空降深层页
- 需要快速跳回上层时
先别用
- 只有一两层的小站
- 流程式向导——用步骤条
- 首页本身——它没有上层
05 · 想一想
一道题，检查眼力
什么样的站点最需要面包屑？
对。用户常从搜索直接空降到第四层——面包屑让他知道自己在哪、怎么上去。
一两层的小站加面包屑只是仪式感，「首页 / 关于」帮不上任何忙。
落地页只有一层，没有「层级位置」可标。
06 · 说给 AI 听
让 AI 改它时，这样说
面包屑反映层级、不反映历史——让 AI 按站点结构生成，别按浏览记录。
详情页加面包屑：首页 / 分类 / 当前文章
面包屑分隔符换成小箭头
层级太深时中间折叠成省略号
面包屑最后一项不可点，颜色加深
最容易踩的坑
面包屑显示的是「你在哪」，不是「你来时的路」——它不是浏览器的后退按钮。