面包屑导航完整设计方法（原则 + 类型 + 规范 + 写法 + 避坑）

一、面包屑核心作用

告诉用户当前在网站的位置

一键返回上级页面，减少返回步骤

强化层级架构，助力 SEO

降低用户迷路，提升站内停留

二、面包屑三种常用类型

1. 层级型（最常用，企业 / 官网 / 资讯）

跟随网站信息架构路径：

首页 > 一级栏目 > 二级栏目 > 当前页

适用：层级结构网站、产品官网、政府门户

2. 路径型（历史足迹）

按用户浏览先后顺序：

首页 > 看过的 A 页 > 看过的 B 页 > 当前页

缺点：路径乱、无标准结构，不推荐正式官网用

3. 属性 / 标签型（电商 / 商城）

按筛选属性分类：

首页 > 男装 > 外套 > 羽绒服

适用：电商、商品多维度筛选站点

三、设计基本原则

位置固定：统一放在页面标题上方、banner 下方

层级控制：最多3–4 级，不要过长

最后一级：当前页面文字只展示、不做链接

分隔符统一：只用一种，不混用

文字精简：栏目名短、直白，不冗长

移动端保留：缩小字体、精简省略，不要直接删掉

四、视觉样式规范

1. 分隔符推荐

常用：> / »

禁止：用竖线、圆点、特殊花哨符号

2. 字体与颜色

字号：比正文小一号

颜色：浅灰色次要文字，不可用高亮主色

链接 hover：可轻微变色、下划线

当前页：深灰色、无链接、无 hover 效果

3. 间距

左右留白均匀，每项之间间距舒适，不拥挤不松散

五、标准结构格式

text

首页 > 一级栏目 > 二级栏目 > 当前页面

示例：

首页 > 关于我们 > 企业介绍

六、SEO 设计要点

加面包屑结构化数据（Schema），搜索引擎可展示路径

链接使用固定规范 URL，不做动态跳转

栏目名称与导航、标题保持文字一致，避免分词混乱

不堆砌关键词，保持自然名称

七、移动端适配设计

层级过多时中间省略：

首页 > … > 二级栏目 > 当前页

缩小字号、减少左右边距

保留核心返回路径，不全部折叠隐藏

八、常见错误避坑

最后一级当前页加了链接（错误）

层级无限拉长，五六级以上

分隔符乱用、样式杂乱

文字和主导航栏目名不一致

内容页没有面包屑，只有栏目页有

移动端直接删掉面包屑

九、最简落地口诀

位置靠上、三级为宜、最后无链、符号统一、色浅字小、全站统一、移动端精简不删除。

泰安网络公司