下图是SAPSpartacus电商云UI的面包屑AngularCloudPortal源码。Component的crumbs$数据通过结构指令*ngFor展开，然后通过span和a标签进行渲染。面包屑的组件区域仅限于此：“面包屑”（或“面包屑轨迹”）是一种辅助导航方案，用于显示用户在网站或Web应用程序中的位置。这个词来自汉塞尔和格莱特的童话故事，其中两个有头衔的孩子撒下面包屑，形成了一条回家的路。就像在故事中一样，真实应用程序中的面包屑为用户提供了一种追踪路径回到其原始着陆点的方法。下图是Breadcrumb在Spartacus中的具体导航路径。点击Sony->CameraFlashes->Home，可以返回到主页。这个过程还是很直观的。您经常可以在以分层方式组织大量内容的网站中找到面包屑。您还可以在具有多个步骤的Web应用程序中看到它们，其功能类似于进度条。在最简单的形式中，面包屑是水平排列的文本链接（如SAPSpartacus），由一些特殊符号分隔（如Spartacus中的/）；此符号表示页面相对于其旁边的页面链接的级别。什么时候应该使用面包屑？对大型站点和具有分层排列页面的站点使用面包屑导航。一个很好的场景是电子商务网站，其中大量产品被分组到逻辑类别中。相反，面包屑不应用于没有逻辑层次结构或分组的单级站点。确定站点是否会从面包屑导航中受益的一个好方法是构建站点地图或表示站点导航架构的图表，然后分析面包屑是否提高了用户在类别内和类别之间导航的能力。面包屑导航应被视为一项附加功能，不应取代功能正常的主导航菜单。这是一个方便的功能；允许用户确定他们所在位置的辅助导航方案；以及另一种浏览网站的方式。
