Merge pull request #12826 from abpframework/doc/4649

Documentation for breadcrumb

docs/en/UI/Angular/Breadcrumb.md

@@ -0,0 +1,50 @@
+## 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`](./Page-Component.md).
+
+## 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`:
+
+```html
+<abp-page title="Title">
+  <abp-page-breadcrumb-container>
+    <abp-breadcrumb-items [items]="breadCrumbItems"></abp-breadcrumb-items>
+  </abp-page-breadcrumb-container>
+</abp-page>
+```
+
+```js
+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](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/common.ts#L69).
+
+## See Also
+
+- [Page Component](./Page-Component.md)