From 9a02778a8954728add2b040b17d218cf9ebd22b9 Mon Sep 17 00:00:00 2001
From: muhammedaltug <muhammetaltug@gmail.com>
Date: Tue, 31 May 2022 13:26:51 +0300
Subject: [PATCH] Documentation for breadcrumb

---
 docs/en/UI/Angular/Breadcrumb.md | 50 ++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 docs/en/UI/Angular/Breadcrumb.md

diff --git a/docs/en/UI/Angular/Breadcrumb.md b/docs/en/UI/Angular/Breadcrumb.md
new file mode 100644
index 0000000000..bdd535daeb
--- /dev/null
+++ b/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 for 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. 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)