快速入门2026-06-225 分钟沈路径

面包屑导航设计:提升网站信息架构的层次感

面包屑导航是辅助用户理解当前位置和页面层级的重要组件。本文分享面包屑导航的设计规范。

面包屑导航设计:提升网站信息架构的层次感

面包屑导航(Breadcrumb)展示了用户从首页到当前页面的完整路径。蓝色小导航内置了面包屑组件。

面包屑类型

蓝色小导航支持三种面包屑样式:路径型(基于页面层级)、属性型(基于分类标签)和历史型(基于浏览记录)。其中路径型是最常用的形式。

分隔符设计

默认使用大于号(>)作为层级分隔符,也支持斜杠(/)和箭头(→)。分隔符的颜色比文字更浅,形成清晰的视觉层次。

响应式处理

在移动端,面包屑路径可能过长。蓝色小导航会自动折叠中间层级,只显示首尾两个节点,并用省略号连接。

面包屑信息架构辅助导航