{"id":17605566,"url":"https://github.com/dirkluijk/ngx-breadcrumpy","last_synced_at":"2025-03-25T22:32:29.813Z","repository":{"id":39399051,"uuid":"206106875","full_name":"dirkluijk/ngx-breadcrumpy","owner":"dirkluijk","description":"Awesome breadcrumbs for Angular","archived":false,"fork":false,"pushed_at":"2024-01-05T14:33:54.000Z","size":2366,"stargazers_count":5,"open_issues_count":17,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-10T06:51:21.912Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/breadcrumpy","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dirkluijk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-03T15:11:31.000Z","updated_at":"2022-06-21T12:11:35.000Z","dependencies_parsed_at":"2024-10-23T01:56:14.706Z","dependency_job_id":null,"html_url":"https://github.com/dirkluijk/ngx-breadcrumpy","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Fngx-breadcrumpy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Fngx-breadcrumpy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Fngx-breadcrumpy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dirkluijk%2Fngx-breadcrumpy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dirkluijk","download_url":"https://codeload.github.com/dirkluijk/ngx-breadcrumpy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222099608,"owners_count":16931447,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-22T15:01:15.137Z","updated_at":"2024-10-29T19:09:38.988Z","avatar_url":"https://github.com/dirkluijk.png","language":"TypeScript","readme":"# Breadcrumpy 🍞\n\n\u003e Awesome breadcrumbs for Angular!\n\n[![NPM version](http://img.shields.io/npm/v/ngx-breadcrumpy.svg?style=flat-square)](https://www.npmjs.com/package/ngx-breadcrumpy)\n[![NPM downloads](http://img.shields.io/npm/dm/ngx-breadcrumpy.svg?style=flat-square)](https://www.npmjs.com/package/ngx-breadcrumpy)\n[![Build status](https://github.com/dirkluijk/ngx-breadcrumpy/actions/workflows/main.yml/badge.svg?branch=master)](https://github.com/dirkluijk/ngx-breadcrumpy/actions/workflows/main.yml)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\n## Overview\n\n### What? 🤔\n\nAn awesome library to easily add breadcrumbs to your Angular application.\n\n* Simply add breadcrumb labels to your Angular routing\n* It supports asynchronous (reactive) breadcrumbs\n* Flexible configuration. However you like to roll!\n* ~~Angular Material and PrimeNG examples included~~ (on roadmap)\n\n### Why? 🤷‍♂️\n\nExisting breadcrumb libraries do not seem to support async (reactive) breadcrumbs.\nAlso, this library provides many different configuration options.  \n\n## Installation 🌩\n\n##### npm\n\n```\nnpm install ngx-breadcrumpy\n```\n\n##### yarn\n\n```\nyarn add ngx-breadcrumpy\n```\n\n## Usage 🕹\n\n### Basic example\n\nJust add a `breadcrumb` data property to your routes.\n\n```typescript\nexport const ROUTES: Routes = [\n  {\n    path: 'about',\n    component: AboutComponent,\n    data: { breadcrumb: 'About' }\n  },\n  {\n    path: 'products',\n    data: { breadcrumb: 'Products' }\n  }\n];\n```\n\n#### a) Use the default breadcrumb component:\nNow, import the `BreadcrumbsModule` and add the included breadcrumb component to your template:\n```html\n\u003cbcy-breadcrumbs\u003e\u003c/bcy-breadcrumbs\u003e\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\n#### b) Or implement your own:\nAlternatively, implement your own breadcrumb component using the `BREADCRUMBS` injection token:\n\n```typescript\nimport { Component, Inject } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { Breadcrumb, BREADCRUMBS } from 'ngx-breadcrumpy';\n\n@Component({\n  selector: 'app-breadcrumb',\n  template: `\n    \u003cng-container *ngFor=\"let b of breadcrumbs$ | async; last as last\"\u003e\n      \u003ca [routerLink]=\"b.urlSegments\"\u003e{{ b.label }}\u003c/a\u003e \u003cspan *ngIf=\"!last\"\u003e / \u003c/span\u003e\n    \u003c/ng-container\u003e\n  `\n})\nexport class BreadcrumbComponent {\n  constructor(@Inject(BREADCRUMBS) public breadcrumbs$: Observable\u003cBreadcrumb[]\u003e) {}\n}\n```\n\nA breadcrumb contains the following properties:\n````typescript\nexport interface Breadcrumb {\n  /**\n   * Label of the breadcrumb.\n   */\n  label: string;\n\n  /**\n   * Icon of the breadcrumb.\n   */\n  icon?: string;\n\n  /**\n   * Url to the breadcrumb (if not loading), if not using RouterLink.\n   */\n  url?: string;\n\n  /**\n   * Url segments to the breadcrumb (if not loading), useful for RouterLink.\n   */\n  urlSegments?: any[];\n\n  /**\n   * True if the breadcrumb is being loaded.\n   */\n  loading?: boolean;\n}\n````\n\n\n### Advanced configuration\n\nInstead of static breadcrumbs, you may want to make your breadcrumb labels more dynamic. There are several ways to do this!\n\nThe breadcrumb configuration can be of many types:\n\n* `string` (label)\n* `BreadcrumbLiteral` (object with `label` and optionally an `icon`)\n* `Observable\u003cstring | BreadcrumbLiteral\u003e`\n* `(route: ActivatedRouteSnapshot) =\u003e string`\n* `(route: ActivatedRouteSnapshot) =\u003e BreadcrumbLiteral`\n* `(route: ActivatedRouteSnapshot) =\u003e Observable\u003cstring | BreadcrumbLiteral\u003e`\n* `Type\u003cBreadcrumbResolver\u003e`\n\nOf course you can also make combinations. Please find some examples below.\n\n#### 1. Using functions\n\nA function which returns a `string`, `BreadcrumbLiteral` or `Observable\u003cstring | BreadcrumbLiteral\u003e`.\n\n```typescript\nexport const ROUTES: Routes = [\n  {\n    path: 'product/:id',\n    data: {\n      breadcrumb: (route: ActivatedRouteSnapshot) =\u003e `Product ${route.paramMap.get('id')}` \n    }\n  }\n];\n```\n\n#### 2. Using a BreadcrumbResolver\n\nYou can also use a special `BreadcrumbResolver` service to benefit from dependency injection.\nThe `resolve` method should return either a `string`, `BreadcrumbLiteral` or `Observable\u003cstring | BreadcrumbLiteral\u003e`.\n\nAsynchronous observables will not block the routing process, but make the breadcrumb appear when resolved. \n\n```typescript\nexport const ROUTES: Routes = [\n  {\n    path: 'product/:id',\n    data: { breadcrumb: YourBreadcrumbResolver }\n  }\n];\n\n@Injectable({ providedIn: 'root' })\nclass YourBreadcrumbResolver implements BreadcrumbResolver {\n  public resolve(route: ActivatedRouteSnapshot): Observable\u003cstring\u003e {\n    // just some example of an async breadcrumb label...\n    return of(`Product ${route.paramMap.get('id')}`).pipe(delay(300));\n  }\n}\n```\n\n#### 3. Using Resolve guards\n\nIf you want to stick with resolve guards from `@angular/router`, you can.\nThey will will dynamically add the `breadcrumb` property to your route.  \n\n```typescript\nexport const ROUTES: Routes = [\n  {\n    path: 'product/:id',\n    resolve: { breadcrumb: YourResolveGuard }\n  }\n];\n\n@Injectable({ providedIn: 'root' })\nclass YourResolveGuard implements Resolve\u003cstring | BreadcrumbLiteral\u003e {\n  /* ... */\n}\n```\n\nNOTE: keep in mind that the resolve guards from Angular Router are blocking! To get around this, use the\npreviously mentioned `BreadcrumbResolver`. You can also make your guard return\nan `Observable\u003cObservable\u003cstring | BreadcrumbLiteral\u003e\u003e`. Breadcrumpy will automatically support this.\n\n### Using a different route property\n\nJust provide a `BREADCRUMB_KEY` token in your root module to change the default `breadcrumb` property name.\n\n```typescript\nimport { BREADCRUMB_KEY } from 'ngx-breadcrumpy';\n\n@NgModule({\n  providers: [\n    {\n      provide: BREADCRUMB_KEY,\n      useValue: 'yourBreadcrumb'\n    }\n  ]\n})\nclass AppModule {}\n```\n\n### Using translations (i18n)\n\nJust implement your [own breadcrumb component](#b-or-implement-your-own) and use translation pipes for your breadcrumb labels.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/dirkluijk\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/2102973?v=4\" width=\"100px;\" alt=\"Dirk Luijk\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDirk Luijk\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/dirkluijk/@ngx-dirkluijk/ngx-breadcrumpy/commits?author=dirkluijk\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/dirkluijk/ngx-breadcrumpy/commits?author=dirkluijk\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirkluijk%2Fngx-breadcrumpy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdirkluijk%2Fngx-breadcrumpy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdirkluijk%2Fngx-breadcrumpy/lists"}