面包屑 · Breadcrumb
英文：Breadcrumb
导航与切换难度：入门 ★
🗣️一句话大白话
在页面顶部显示层级路径，帮助用户理解当前页面在网站结构中的位置。在页面顶部显示层级路径，例如“首页 › 作品 › AI 工具 › 项目详情”，帮助用户理解当前页面在网站结构中的位置。
🎬真实场景
多层级网站、电商、博客、文档、项目详情页
📮你可以这样说
「在 Punk 的项目详情页顶部添加 Breadcrumb， 路径为 Home › Work › AI Tools › Project Detail； 使用 nav aria-label="Breadcrumb" 和有序列表， 最后一项表示当前页面，不设置链接，并添加 aria-current="page"。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：面包屑可有可无。实际对多层级网站是定位和返回的关键，但当前页不应是链接
🚫什么时候别用
- ✗单层结构网站（没有层级可显示）
🧩常见变体
层级面包屑扁平路径
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系