下图是 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 导航。 一个很好的场景是电子商务网站，其中大量的产品被分组到逻辑类别中。