breadcrumb

用途：面包屑是水平排列的链接列表，用符号分隔，帮助用户一眼看清自己在网站结构中的位置，并作为辅助导航方便返回父级页面。适合层级较深的网站或导航路径复杂的场景。\n\n主要能力与适用场景：多层级网站（分类、子分类）；用户从搜索引擎进入深层页面的大型或复杂站点；依赖嵌套文件或文档组织的系统（文件浏览器、项目管理工具）；电商的分层商品分类。\n\n何时避免：单层平面结构网站；落地页或首页；使用简单导航的小网站；层级已通过其他导航元素体现时；使用基于弹窗导航的单页应用。\n\n使用方式：先从 references/pattern.md 的解剖与示例出发，选择最小可行变体；应用无障碍、性能和交互护栏后再做视觉打磨；用测试指引验证键盘、屏幕阅读器、响应式和失败场景下的行为。\n\n无障碍要点：用 <nav> 加 aria-label="Breadcrumb"；当前页用 aria-current="page"；用有序列表 <ol> 表达顺序；保证键盘导航和可见焦点；长路径提供跳转链接；动态更新时向屏幕阅读器播报。不要：让当前页标题可点击；仅依赖视觉分隔符（应使用 CSS 伪元素）。\n\n性能目标：初始渲染 < 50ms；悬停/聚焦交互延迟 < 100ms；CLS 为 0；含样式包体 < 5KB；复杂路径内存 < 1MB。深层级可用懒加载，仅在需要时加载中间层级（代码见资料）。\n\n常见错误：把当前页做成链接（应改为带 aria-current="page" 的不可点击 span）；用面包屑替代主导航（应始终提供主菜单，面包屑仅作补充）；层级表示错误，跳过层级（应显示完整有意义的层级路径，仅在首页是明确面包屑项时才包含 Home）。完整实现细节、示例与测试说明见 references/pattern.md。