docs/en/framework/ui/angular/breadcrumb.md
//[doc-seo]
{
"Description": "Learn how to implement and customize breadcrumb navigation in your ABP applications with the Breadcrumb Component for enhanced user experience."
}
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.
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.
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",
},
];
}