下圖是 SAP Spartacus 電商雲 UI 的 breadcrumb Angular Cloud Portal 的原始碼。Component 的 crumbs$ 資料，透過結構化指令 *ngFor 展開，然後透過 span 和 a 標籤渲染。
breadcrumb 的 Component 區域僅限於此：
“breadcrumb”（或“breadcrumb trail”）是一種二級導航方案，用於顯示使用者在網站或 Web 應用程式中的位置。 這個詞來自漢塞爾和格萊特的童話故事，其中兩個有頭銜的孩子丟下面包屑，形成一條回家的路。 就像在故事中一樣，現實世界應用程式中的 breadcrumb 為使用者提供了一種追蹤路徑回到其原始著陸點的方法。
下圖就是 Spartacus 中 breadcrumb 具體的導航路徑，透過 Sony->Camera Flashes->Home 的依次點選，可以回到 home 頁面，這個過程還是非常直觀的。
您通常可以在以分層方式組織大量內容的網站中找到 breadcrumb. 您還可以在具有多個步驟的 Web 應用程式中看到它們，它們的功能類似於進度條。 在最簡單的形式中，breadcrumb 是水平排列的文字連結(就像 SAP Spartacus)，由某種特殊符號分隔(比如 Spartacus 中的 /)；該符號表示該頁面相對於其旁邊的頁面連結的級別。
什麼時候應該使用 breadcrumb？
對大型網站和具有分層排列頁面的網站使用 breadcrumb 導航。 一個很好的場景是電子商務網站，其中大量的產品被分組到邏輯類別中。
相反的，不應該將 breadcrumb 用於沒有邏輯層次結構或分組的單級網站。 確定網站是否會從 breadcrumb 導航中受益的一個好方法是構建站點地圖或表示網站導航架構的圖表，然後分析 breadcrumb 是否會提高使用者在類別內和類別之間導航的能力。
breadcrumb 導航應被視為一項額外功能，不應取代有效的主導航選單。 這是一個方便的功能； 輔助導航方案，允許使用者確定他們的位置； 以及瀏覽您的網站的另一種方式。