面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

面包屑导航来源

很久很久以前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。他的儿子名叫汉赛尔，女儿名叫格莱特。后来樵夫的妻子去世了，他又给孩子们娶了一个后母。后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。”但是当太阳升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了，兄妹俩在森林中迷了路。不天的寻路，让他们饥饿难忍，腿脚无力，来到了一个用面包做屋顶，糖果做窗户的小屋。饥饿让他们忘记了疲惫，及潜在的危险，啃起了屋子。结果在巫婆的诱骗下，哥哥被锁屋中，妹妹被迫做劳力，就在巫婆要吃掉哥哥之时，妹妹借向巫婆学习添柴之机。将巫婆推入炉中，兄妹俩带着巫婆的财宝，回到了家中。后母己经去世，兄妹俩和父亲一起过上了幸福的生活。

面包屑导航原理

在童话里，面包屑是汉赛尔在进入森林的路中偷偷撒下的，这是一种“历史记录”的应用方式，目的是帮助你追溯来路，因而它应该是一种线性的导航方式。不过在网页的应用中，“追溯来路”这件事浏览器已经做得足够好了，所以“面包屑”慢慢地就变成用来表达内容归属关系的界面元素，也就是我们经常看到的“主分类>一级分类>二级分类>三级分类>……>最终内容页面”这样的方式。但是一般正常的来讲目录结构由3层结构组成。分别是首页>栏目页>内容页。合理的构建目录结构可以让用户随时随地的找到自己所在的位置又能保证栏目分类后的各个栏目的权重不至于太分散。同时在许多关于网站用户使用体验的调查报告中也得出超过3次点击访客还没有找到需要的信息，访客就很大的可能性会离开网站。所以，3层目录结构也是浏览体验的需要。

面包屑导航作用

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。

3、提供返回各个层级的快速入口，方便用户操作。

4、Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，对于提高用户体验来说，是很有帮助的。

5、方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行；

6、减少返回到上一级页面的点击或操作，不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面；

7、不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响；

8、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。

9、有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。

10、面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。

面包屑导航适用条件

虽然眼下很多网站都流行使用面包屑导航，但是并不是所有的网站都适用。符合下面两个条件的网站才适合使用面包屑导航。1、层级较深的网站，面包屑导航适合层级较深的网站，如果只有一级分类的话，通过主导航就可以起到快速定位的作用。比如“豆瓣网”类型扁平构架的网站就没有使用面包屑导航。2、独立不交叉的网站结构，由于面包屑网站导航路径是线性结构的，因此网站内容必须划分的非常清晰，且不存在交叉；否则，面包屑导航的路径就不是唯一的，同一分类可能出现在不同的路径中，让用户感到困惑。

面包屑导航示范

基于位置(网杆基础工程)的面包屑向用户显示他们在网站的哪一个级别页面。

它们一般典型的用于有多个级别（一般是多于两级）的导航方案。在下面的例子中，每一个页面的文本链接表示它比它右边的文本链接高一级。

A 表明当前在网站内的位置。

B 提供指向先前访问过的页面（或网站）和其他区域的捷径。

本质上，它是网站结构的线性表示。Web上的定位面包屑路径所展示的不是导航的历史，而是在整个网站中某个固定的位置。就是说，不管用户是如何到达网杆基础工程页面，面包屑路径都是一样的。

面包屑导航分类

一、基于位置的面包屑导航

这种类型是最常见的。这种类型的面包屑导航可以很好的指出当前页面与整个站点的层次结构。这种面包屑导航可以显示当前页面的前一个页面或者目录的链接。可以使访客了解自己的位置，以及可以更快的找到自己想要到达的页面。可以很好的提高用户的友好体验。

二、基于属性的面包屑导航

这种面包屑导航最常出现在电子商务站点。这种面包屑导航可以很好的指出当前页面内产品的其他属性或者类别。对于一个产品来说，所具有的属性往往不只有一种，而通过这种面包屑导航可以给消费者一个更加直观的了解。

三、基于路径的面包屑导航

这种面包屑导航是最不常见到的。这种面包屑导航和上文所说的童话故事类型很像。他们可以显示访客在到达页面前所访问过的网页的链接。这种面包屑导航不是很受欢迎，因为他们的功能基本上是和前进和后退的按钮是一样的。