Customizing the breadcrumb

Question

could you help me to implement a custom breadcrumb on the order history/order details page? The default breadcrumb is only showing Home instead of Home > Order history or Home > Order history > Order #12345

How can i define my breadcrumbs depending on the used component / used routing path?

Answer 1

You can achieve customization of breadcrumbs for certain pages by using MetaResolvers and overriding BreadcrumbComponent.

MetaResolver allows you to handle meta data for specific given page type and/or page template and has an interface called resolveBreadcrumbs() which handles breadcrumb structure for the given page. You can observe the meta resolver for product page for example here

For the furthest on the right of the breadcrumb, say it's title (Order #12345 in your case), I've achieved by customizing the BreadcrumbComponent in my code.

custom-breadcrumb.component.ts

export class CustomBreadcrumbComponent extends BreadcrumbComponent implements OnInit {
  
  isOrderDetailPage: boolean;

  constructor(private pageLayoutService: PageLayoutService,
              private orderDetailsService: OrderDetailsService) {

  this.pageLayoutService.page$.subscribe(page => {
  this.isOrderDetailPage = page.pageId === 'order';
})

this.order$ = this.orderDetailsService.getOrderDetails();

}

ngOnInit() {
  super.ngOnInit();
 }
}

custom-breadcrumb.component.html

<div class="custom-breadcrumb">
  <div class="container">
    <nav>
     <span *ngIf="isOrderDetailPage && order$ | async as order"> <a>{{order?.code}}</a></span>
   </nav>
 </div>
</div>