面包屑导航是一种帮助用户了解当前页面在网站结构中位置的辅助导航系统，常用于多层级网站。它能提升用户体验，让用户快速返回上级页面，同时也有利于SEO优化。在HTML5中，制作面包屑导航既需要语义化的标签结构，也需要适当的样式设计。
使用语义化HTML5标签构建结构
HTML5推荐使用元素来定义导航区域，面包屑作为导航的一种，应包裹在中，增强可访问性。
内部通常使用无序列表表示，链接使用标签，当前页可用或带aria-current="page"的链接表示。
添加CSS美化样式
为了让面包屑看起来更清晰，可以通过CSS添加分隔符、间距和颜色。常见的做法是使用::after伪元素插入“/”或“>”符号作为分隔。
- 移除列表默认样式（list-style: none）
- 设置水平排列（display: flex 或 inline-block）
- 为分隔符添加 margin 或 padding 增强可读性
- 当前页文字设为灰色或加粗，表示不可点击
nav[aria-label="Breadcrumb"] ol {
padding: 0;
list-style: none;
display: flex;
gap: 8px;
}
nav[aria-label="Breadcrumb"] li::after {
content: "/";
color: #999;
margin-left: 8px;
}
nav[aria-label="Breadcrumb"] li:last-child::after {
content: "";
}
nav[aria-label="Breadcrumb"] span {
color: #666;
font-weight: bold;
}
gap: 8px;
}
nav[aria-label="Breadcrumb"] li::after {
content: "/";
color: #999;
margin-left: 8px;
}
nav[aria-label="Breadcrumb"] li:last-child::after {
content: "";
}
nav[aria-label="Breadcrumb"] span {
color: #666;
font-weight: bold;
}
适配移动端与可访问性考虑
在小屏幕上，面包屑可能需要隐藏部分内容或折叠成“...”形式以节省空间。可通过媒体查询控制显示项数。
对于屏幕阅读器用户，aria-label和aria-current属性至关重要，确保辅助技术能正确识别当前位置。
- 避免使用图片符号作分隔，优先使用文本或伪元素
- 确保链接有足够点击区域，方便移动设备操作
- 测试键盘导航是否流畅
