术语图鉴/前端基础/面包屑导航
←→切换Esc返回

面包屑导航 Breadcrumb

你可能会说

用户在三级页面里迷路了,加个路径导航让他知道自己在哪。

面包屑导航是显示当前页面在网站层级中的路径(如 首页 > 博客 > 文章标题),帮助用户定位和回退。

显示当前页面位置的层级路径,如「首页 > 博客 > 技术文章」。每一级都可以点击返回,不会迷路。

也常被叫作Breadcrumb

生活类比

像童话里撒面包屑标记来时的路——沿着它就能一步步走回去。

🎮 动手试试

👇 点击面包屑层级跳转

首页/产品/手机/iPhone 16
选择题选择一个你认为最合适的答案

关于「面包屑导航」,以下哪个描述最准确?

你可以这样告诉 AI

帮我加面包屑导航:首页 > 分类名 > 当前页面,用 > 分隔,当前页不可点击,加 JSON-LD 结构化数据。

容易混淆?这样区分

面包屑导航 Breadcrumb≠
侧边导航 Sidebar Nav

侧边导航展示全站结构(常驻),面包屑只展示当前路径(上下文相关)。

面包屑导航 Breadcrumb≠
后退按钮 Back Button

后退是浏览器历史回退,面包屑是网站层级跳转(可以跳多级)。

什么时候用

层级深的网站

电商分类页、文档站、博客等层级超过 3 层的站点,面包屑帮用户快速定位和跳回上级。

和 AI 协作时

想让 AI 加面包屑时,直接说「加个面包屑导航:首页 > 分类 > 当前文章,用 > 分隔,当前页不可点」。

什么时候不用

单层扁平网站

只有首页 + 内容页两层结构的简单网站,面包屑意义不大。

与导航无关的项目

纯后端服务、数据处理、API 接口等没有页面导航概念。

组成结构 · Anatomy

1
核心概念Core

显示当前页面位置的层级路径,如「首页 > 博客 > 技术文章」。每一级都可以点击返回,不会迷路。

2
实际表现In Practice

像童话里撒面包屑标记来时的路——沿着它就能一步步走回去。

3
与 AI 的关联AI Context

和 AI 沟通时提到「加个层级导航,能看出当前在哪」,做的就是面包屑。

典型使用场景

面包屑路径导航
告诉 AI「帮我在页面顶部加面包屑:首页 > 分类 > 文章详情,用 > 分隔,当前页灰色不可点,上级可点击跳转」
想弄懂概念时
告诉 AI「用大白话给我解释什么是面包屑导航,举个生活中的例子」

延伸阅读