面包屑是源于童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用就是告诉用户他们目前在网站中的位置以及方便用户检索查找网页中的内容。

那么面包屑导航有哪些呢？使用的时候又要注意什么呢？今天张工就带大家一起来了解下！

一般来说面包屑导航可分为基于位置的面包屑导航、基于路径的面包屑导航和基于属性的面包屑导航。像网站的多级栏目就是基于位置的面包屑导航，一级栏目到二级，二级再到三级直至再往下分下去，这其实就是网站的层级结构，层级越清楚越能方便用户浏览，并最快速的找到他所想要的东西，这无疑中增加了客户体验。

基于路径的面包屑导航是根据用户的浏览轨迹体现出来的。不知道你有没有发现有的网站你浏览过哪些页面后，它会把你的浏览轨迹记下来，当你在访问其他页面的时候就会把你浏览过的网页痕迹调用出来推送给你了。这种说实话比较乱，张工觉得还不如用返回去看了。

最后一种就是基于属性的面包屑导航，这种是基于特定的页面给你列出来。像一般的商城网站用的多。它会把不同的商品属性和配置给你列出来，供你选择。

这三种面包屑导航一般是基于位置的用的多，客户体验比较好！

面包屑导航非常的不错，但是在使用的时候也要注意几点：

一、面包屑导航起的是辅助作用，不要把它当作主导航

主导航永远是主导航，基本上每个网站都是有主导航的。而面包屑导航只是增加导航的层级结构，方便用户浏览的，当然也是可以没有的。

二、分隔符的使用

面包屑导航比较简洁的分隔符是大于号“>"。通常大于号用于基于位置的面包屑导航，以“父类>子类”的形式表示导航栏目之间的层级关系。除了大于号一般还用右箭头“→”，双大于号”>>”和斜线”/”。当然用哪种分隔符作为面包屑导航取决于网站的页面设计了，哪种符号比较符合当前页面的设计风格就用哪种。

三、面包屑导航不要太复杂

虽然说导航的层级越多越利于用户浏览，但是有一个现实的问题是当你用了层级较多的面包屑导航后，手机端用户浏览的时候就会比较麻烦了。手机端毕竟屏幕小，当面包屑导航用的太多的时候就会占满屏幕，反而影响用户去浏览网页的主要内容了。这样的话就得不偿失了。所以张工建议一般的企业官网面包屑导航不用太复杂，分到三级栏目就可以了。