I have the following in my app.routes: { path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } }, { path: 'product', component: ProductComponent, data: { breadcrumb: 'Product' } }, { path: 'cart', component: CartComponent, data: { breadcrumb: 'Cart' } }, My imports in app.component: imports: [ BreadcrumbComponent, BreadcrumbItemDirective ], app.component.html contains: <xng-breadcrumb></xng-breadcrumb> When I navigate from one page to another, only the breadcrumb of the current page is shown, no other breadcrumb is shown so I cannot navigate using the breadcrumbs. Doc: xng-breadcrumb doc Continue reading...