NAVIGATION
面包屑导航Breadcrumbs
用斜杠或箭头把当前页面的层级路径串成一条链，最后一节加粗表示"你在这里"。
效果预览
适合用在哪
电商分类页、文档站、后台系统；层级超过两层的页面。
容易踩的坑
- 当前页也做成可点击链接，点了原地刷新，应改为 aria-current="page" 的纯文本。
- 分隔符用真实字符写进链接文字里，读屏会逐个念出「斜杠」，应用 CSS 伪元素或 aria-hidden。
- 层级只有两层也硬加面包屑，与页面标题重复，徒增视觉噪音。
设计提示词 · Prompt
面包屑导航（Breadcrumbs）：横向排列的层级路径，条目间用斜杠 / 或 › 分隔（分隔符用 60% 灰、字号比正文小 1-2px）。已访问层级用中性灰并可点击（悬停时加深 + 下划线），当前层级用深色 600 字重且不可点击。整体可包一层胶囊容器（白底 + 1px 描边 + 圆角 999px + 内边距 8px 14px）。移动端超出宽度时，把中间层级折叠为「…」只保留首尾两节。
Breadcrumbs: a horizontal hierarchical path, with items separated by a slash / or › (separators in 60% gray, 1-2px smaller than body text). Visited levels are neutral gray and clickable (darker + underline on hover); the current level is dark at 600 weight and not clickable. Optionally wrap the whole thing in a pill container (white background + 1px stroke + 999px radius + 8px 14px padding). On mobile, when it exceeds the width, collapse the middle levels into "…" and keep only the first and last items.
常见搭配
同一页面里经常和「面包屑导航」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s">
<div class="d-breadcrumb">
<span class="d-breadcrumb__item">首页</span>
<span class="d-breadcrumb__sep">/</span>
<span class="d-breadcrumb__item">产品</span>
<span class="d-breadcrumb__sep">/</span>
<span class="d-breadcrumb__item">自动化</span>
<span class="d-breadcrumb__sep">/</span>
<span class="d-breadcrumb__item--cur">工作流引擎</span>
</div>
</div>