You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
abp/docs/en/UI/Angular/Breadcrumb.md

1.3 KiB

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