Breadcrumb Component

ABP provides a component that listens to the angular router's NavigationEnd event and creates inputs for BreadcrumbItemsComponent. This component is used in ABP components with PageComponent.

Breadcrumb Items Component

BreadcrumbItemsComponent is used to display breadcrumb items. It can be useful when you want to display breadcrumb items in a different way than the default.

Usage

Example of overriding the default template of PageComponent:

<abp-page title="Title">
  <abp-page-breadcrumb-container>
    <abp-breadcrumb-items [items]="breadCrumbItems"></abp-breadcrumb-items>
  </abp-page-breadcrumb-container>
</abp-page>

import { Component } from "@angular/core";
import { ABP } from "@abp/ng.core";

@Component({
  /* component metadata */
})
export class YourComponent {
  breadCrumbItems: ABP.Route[] = [
    {
      name: "Item 1",
    },
    {
      name: "Item 2",
      path: "/path",
    },
  ];
}

Inputs

• items: Partial<ABP.Route>[] : Array of ABP.Route objects. The source code of ABP.Route can be found in github.

See Also

• Page Component