下图是 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 导航应被视为一项额定性能，不应取代无效的主导航菜单。这是一个不便的性能；辅助导航计划，容许用户确定他们的地位；以及浏览您的网站的另一种形式。