先談一下面包屑的由來：

很久很久以前，在大森林的邊上住著一個(gè)貧窮的樵夫，他妻子和兩個(gè)孩子與他相依為命。他的兒子名叫漢賽爾，女兒名叫格萊特。后來樵夫的妻子去世了，他又給孩子們?nèi)⒘艘粋€(gè)后母。后母計(jì)劃把兩個(gè)孩子帶到森林的深處，然后趁他們睡著的時(shí)候跑掉。漢賽爾無意中知道了后母的計(jì)劃，于是偷偷地把一塊面包藏在了口袋里。

在去森林的路上，漢賽爾悄悄地捏碎了他的面包，并不時(shí)地停下腳步，把碎面包屑撒在路上。后母順利地趁孩子們睡著的時(shí)候溜掉了，漢賽爾和格萊特醒來已是一片漆黑。漢賽爾安慰他的妹妹說：“等月亮一出來，我們就看得見我撒在地上的面包屑了，它一定會(huì)指給我們回家的路?！钡钱?dāng)月亮升起來時(shí)，他們?cè)诘厣蠀s怎么也找不到一點(diǎn)面包屑了，原來它們都被那些在樹林里、田野上飛來飛去的鳥兒一點(diǎn)點(diǎn)地啄食了。

這是《格林童話》中所描述的與面包屑有關(guān)的故事。不知道從哪一天開始，漢賽爾的面包屑開始悄悄地出現(xiàn)在某個(gè)網(wǎng)站的導(dǎo)航位置上，然后迅速地撒遍了全世界，變成了今天大家所熟知的“面包屑導(dǎo)航”。

再了解一下面包屑導(dǎo)航的定義：

維基百科上關(guān)于面包屑的定義，把Websites那部分解釋一下就是這樣：

面包屑通常水平地出現(xiàn)在頁面頂部，一般會(huì)位于標(biāo)題或頁頭的下方。它們提供給用戶返回之前任何一個(gè)頁面的鏈接（這些鏈接也是能到達(dá)當(dāng)前頁面的路徑），在層級(jí)架構(gòu)中通常是這個(gè)頁面的父級(jí)頁面。

面包屑提供給用戶回溯到網(wǎng)站首頁或入口頁面的一條快速路徑，它們絕大部分看起來就像這樣：首頁→分類頁→次級(jí)分類頁

以下是英文摘錄：
Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. They may look something like this:
Home page → Section page → Subsection page

其次說說面包屑的作用：

一是：提供了多路徑的交互方式，方便用戶跳轉(zhuǎn)到其它頁面；

二是：從一個(gè)側(cè)面展示了該信息集合的信息結(jié)構(gòu)和集合方式。

三是：“面包屑”信息結(jié)構(gòu)對(duì)于網(wǎng)站的SEO也有著大的好處，它可以更多的強(qiáng)調(diào)網(wǎng)站關(guān)鍵字，擴(kuò)大關(guān)鍵字的范圍，優(yōu)化網(wǎng)站的SEO。
面包屑包含三種：

1、? 定位面包屑路徑

面包屑路徑中最常見的一種。當(dāng)前頁面路徑在商城有唯一的位置。

基于位置(Location-based)的面包屑向用戶顯示他們?cè)诰W(wǎng)站的哪一個(gè)級(jí)別頁面。它們一般典型的用于有多個(gè)級(jí)別（一般是多于兩級(jí)）的導(dǎo)航方案。在下面的例子中(來自于SitePoint)，每一個(gè)頁面的文本鏈接表示它比它右邊的文本鏈接高一級(jí)。

舉例(來自藍(lán)色理想論壇)：http://www.sitepoint.com/article/introducing-joomla/

A? 表明當(dāng)前在網(wǎng)站內(nèi)的位置。

B? 提供指向先前訪問過的頁面（或網(wǎng)站）和其他區(qū)域的捷徑。

本質(zhì)上，它是網(wǎng)站結(jié)構(gòu)的線性表示。Web上的定位面包屑路徑所展示的不是導(dǎo)航的歷史，而是在整個(gè)網(wǎng)站中某個(gè)固定的位置。就是說，不管用戶是如何到達(dá)location 頁面，面包屑路徑都是一樣的。

2、?? 路線面包屑路徑

路線面包屑是動(dòng)態(tài)的。當(dāng)前頁面路徑是根據(jù)用戶的點(diǎn)擊產(chǎn)生的。
根據(jù)到達(dá)方式的不同，特定頁面上的面包屑路徑也不同?；诼窂?Path-based)的面包屑路徑顯示用戶到達(dá)特定頁面的操作步驟，它們顯示用戶在到達(dá)當(dāng)前頁面之前訪問過的頁面。

舉例：http://www.epicurious.com/舊版? qzone舊版路徑

3、? 屬性面包屑路徑

當(dāng)前頁面可以通過N條路徑找到。
屬性面包屑是描述一個(gè)頁面的方式，不是它在網(wǎng)站中的位置，也不是訪問的路徑，而是它在某種元數(shù)據(jù)方案中的位置，這種方案往往是主題層級(jí)的。
基于特性(Attribute-based)的面包屑路徑顯示一個(gè)特定頁面的特性。

舉例：
A、在Newegg，面包屑路徑表示在一個(gè)特定頁面顯示的特性內(nèi)容。
這個(gè)頁面顯示所有擁有由Lian Li制造并有MicroATX微塔式因素的電腦機(jī)箱。

B、amazon ，面包屑表達(dá)的是物品所屬類別，并允許點(diǎn)擊類別名稱訪問上級(jí)的類別。整條路徑提供了最低一級(jí)的頁面。也就是說提供了多條通往結(jié)點(diǎn)頁面的情況。

來源：http://isd.tencent.com/?p=2101