面包屑
Breadcrumb
别名:面包屑导航路径导航层级路径位置导航首页大于分类那种路径网站路径条trail
这是什么
用"首页 / 分类 / 子类 / 当前页"的层级路径表示用户在信息架构中所处的位置： 每个上级都可点击跳回，末项为当前页不可点。这是防止用户迷路成本最低的手段， 命名源自童话中沿途撒下用来标记归路的面包屑。常置于页面标题上方。
交互实验室
试一试，再决定怎么用点击上级层级，比较短路径与多层路径的定位能力。
正在加载实验室…
使用时关注什么
- 01最后一项表示当前位置，通常不需要再次导航。
- 02窄屏不能让路径挤出页面。
✓ 适用场景
- 层级深于两层的内容型站点（文档、电商类目）
- 用户可能从搜索或外链直达深层页面
- 需要低成本的逐级回退路径
✕ 不适用场景
- 扁平单层的应用，面包屑只是噪音
- 无稳定层级的个性化信息流
- 移动端空间极紧且层级浅（可省略）
常见形式
文字型
Text
纯文本链接 + 分隔符，最常见
带图标
With icons
根节点用房子图标、项前加小图标
截断型
Truncated
中间层级折叠为省略号，可展开
实现要点
flexwhite-space: nowrapoverflow: hiddentext-overflow: ellipsis用 nav[aria-label="面包屑"] + 有序列表实现，层级用 ol/li 表达；分隔符用 CSS ::before 或独立 span，勿放进链接的可点击区域。当前页加 aria-current="page" 且渲染为纯文本。过长时中间层级折叠为可展开的省略号， 容器单行省略。
平台 API
<nav aria-label="Breadcrumb"><ol><li>相关概念
固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件相似概念固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件相似概念用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件相似概念用带页码的控件把长结果集切分为离散页面：用户显式点击页码或上一页 / 下一页 按钮取回对应片段，当前位置永远可知、可分享、可回退。与无限滚动的"失控 漂移"相对，它是数据浏览中最可控的方式，也是搜索结果与后台表格的默认选择。
组件相似概念点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件相似概念