麵包屑導航是乙個次級導航系統，可以展示使用者在**或應用中的位置。這個術語**於童話《糖果屋》，故事中的主人公在森林裡用麵包屑做標記來防止迷路。
類似於故事裡的主人公，使用者需要知道他們在**層級結構中的位置以便於他們訪問上一級網頁。本文中，我們將幫助大家加深對麵包屑導航的理解，並結合一些最佳實踐案例來討論麵包屑導航的最佳用法。
作為乙個高效的視覺輔助工具，麵包屑導航暗示了使用者在**層級結構中的位置。對使用者來說，麵包屑導航包含了大量的資訊，可以幫助他們解答以下問題：
1、我在哪？ 麵包屑導航明確地告訴使用者他們的位置。
2、我接下來可以去哪？ 麵包屑可以使使用者更加方便地查詢網頁。比起放在選單裡，放在麵包屑導航中的**結構更容易被使用者所理解。
3、我應該去這裡嗎？麵包屑導航可以暗示使用者網頁內容的價值從而引起他們繼續瀏覽的興趣。比如在乙個電商**中，使用者可能對當前訪問的這個商品不滿意，但是他還想看看同類的其他商品，這時候麵包屑導航就可以告訴使用者同類產品的鏈結。這樣可以很好地降低使用者的流失率。
麵包屑導航具有以下優點：
麵包屑導航最實用的一點便是可以幫助使用者更快地訪問上級網頁，無需借助瀏覽器的「返回」按鈕和頂級導航欄。
麵包屑導航僅由文字和鏈結組成的一行內容構成，因此占用的頁面空間非常小。這樣的好處是當內容過載時它的功能也不會受到影響。
使用者可能會忽略這個小控制項，但是他們從來不會誤解或在使用上遇到問題。
評價乙個**是否適合於使用麵包屑導航的最好方法便是將**的結構畫出來或者以圖表的形式呈現出來，然後分析使用麵包屑導航是否會幫助使用者更方便地切換到不同類的網頁。
什麼時候用：你的**結構是嚴格的線性結構或者是預先分好組（類）的層級結構。比如電商**的結構就是層級結構，包含了按類別分好組的大量商品頁面。
什麼時候別用：你的**結構是單層或者不是分好組（類）的層級結構。
麵包屑導航分為基於位置的麵包屑導航、基於路徑的麵包屑導航和基於屬性的麵包屑導航。
基於位置的麵包屑導航可以表示**的結構。它可以幫助使用者理解並訪問你的**各個層級的內容。這種麵包屑導航對於那些從外部（如搜尋引擎）直接訪問深層位置的使用者來說尤為重要。
在下面這個例子（bestbuy**）中，每乙個鏈結都代表乙個頁面，從左至右逐級深入。
基於路徑的麵包屑導航展示了使用者訪問的完整軌跡。這種麵包屑導航通常是動態生成的。有時候它們會有幫助，但是多數情況下它們會讓使用者感到困惑。使用者通常會在各個頁面之間跳來跳去，這時候記錄下來的路徑就會非常複雜，還不如瀏覽器的「返回」按鈕更加實用。而且，對於從外部直接訪問的使用者來說基於路徑的麵包屑導航就完全沒用了。
下圖是乙個基於路徑的麵包屑導航，展示了到達相同頁面的不同路徑。
基於屬性的麵包屑導航會將特定頁面的類別列出來。比如電商**就會列出來常用商品分類。這種麵包屑導航可以幫助使用者了解產品之間的聯絡，同時提供了不同的訪問方式。
如下圖所示，在tm lewin**中，麵包屑導航展示了商品的不同屬性
使用麵包屑導航的原則是展示**的結構而不是使用者的訪問歷史。因此，盡量使用基於位置和屬性的麵包屑導航而不是基於路徑的。
使用麵包屑導航的時候需要注意以下幾點：
我們應該將麵包屑導航視為一項附加功能，不能用它來替代高效的頂級導航選單。它很方便，但是僅僅作為訪問**的乙個備選方式，而不是唯一方式。下圖的例子是蘋果的官網，在頁面底部新增的麵包屑導航對頂級導航起到了輔助的效果
麵包屑導航的最後一項可以表示當前頁面也可以表示當前頁面的上一級。如果你想用當前頁面的話，切記不要給這個專案新增鏈結，因為使用者已經處於這個頁面了，再新增指向當前頁面的鏈結是沒有任何意義的。
麵包屑導航中最簡潔明瞭的分隔符便是大於號「>」。通常大於號用於基於位置的麵包屑導航，以「父類》子類」的形式表示導航專案之間的層級關係。除了大於號以外還可以用向右箭頭「→」，雙大於號」>>」和斜線」/」。到底使用哪個取決於導航的類別和視覺效果。
在設計的時候要謹慎考慮導航選單的大小和padding屬性。在每乙個專案之間必須有充足的間隔，否則使用者理解起來會有問題。同時你希望麵包屑導航不會搶了其他主要部分的風頭，因此你需要讓它看起來比頂級導航要低等一些。
不要使用花哨的字型和亮色，這樣會違背使用麵包屑導航的初衷。設計麵包屑導航的原則是它不能是頁面載入後最吸引使用者的內容。下面這個例子中的麵包屑導航雖然效果不差，但是太吸引使用者的目光，可能會分散使用者的注意力，使其更加關注麵包屑導航而不是頂級導航和頁面的主要內容。
谷歌就沒有讓麵包屑導航很顯眼，但是使用者可以很方便地發現並使用它。
麵包屑導航在移動端的體驗並不好，尤其是在層級比較複雜的**中。而且，你會發現在在移動端上設計麵包屑導航會遇到很多問題。因此，你需要盡可能地簡化你的**結構，如果簡化之後仍較為複雜，那麼最好就不要用麵包屑導航，畢竟它不是主要功能。
麵包屑導航
麵包屑是一種常見的導航工具，通常出現在網頁內容的上方。麵包屑小巧，簡單，有時候甚至很難引起人們的注意，但就是這麼乙個簡單的小東西，卻有十分重要的作用。今天我們就教大家來認識麵包屑。麵包屑的概念來自於童話故事 漢賽爾和格萊特 當漢賽爾和格萊特穿過森林時，不小心迷路了，但他們發現在沿途走過的地方都撒下了...
Bootstrap 麵包屑導航
十一月小例子效果如下 jsp頁面 查詢 重置資源名稱 資源提供方 資源型別 資源使用方 應用系統 申請時間 操作 資源名稱 資源提供方 資源型別 資源使用方 應用系統 申請時間 操作 js function else if count 1 table list datatable fndestroy...
vue element ui麵包屑導航
1 公共元件layout中引入麵包屑導航元件，具體位置根據自己需要設定，麵包屑導航利用element ui中的，可事先了解 breadcrumb for item in levellist key item.path handlelink item a el breadcrumb item tran...