An Angular service that simplifies the creation of breadcrumbs that use routing url and params as a basis.
@alevettih/ngx-route-breadcrumbs is an Angular library that provides a simple way to
create breadcrumbs from routing information.
- ✅ Create breadcrumbs from routing info.
- ✅ Provide routing data/params into breadcrumbs with interpolation.
- ✅ Return metadata for implementing a "Back" button.
- ✅ Programmatically manipulate breadcrumbs (changes are rolled back when the contributing component is destroyed).
- ✅ Transform links based on route data (
transformLinkmethod).
| Service | Description |
|---|---|
RouteBreadcrumbsService |
Provides APIs for building and manipulating breadcrumbs sourced from routing information. |
| Member | Description |
|---|---|
items |
Signal that exposes the current breadcrumb collection. |
extend(params, destroyRef) |
Temporarily adds or patches breadcrumbs that fall back when the owning component is destroyed. |
getBack(breadcrumbs) |
Helper that returns the breadcrumb to use for "Back" navigation. |
For a more detailed reference, see the library README.
ngx-route-breadcrumbs/
├── projects/
│ └── ngx-route-breadcrumbs/ # Library source code
│ └── src/
│ └── lib/
│ ├── helpers/ # Helpers and type guards
│ ├── models/ # TypeScript models
│ ├── services/ # RouteBreadcrumbs service
│ └── types/ # TypeScript types
├── dist/ # Build artifacts
└── package.json
- Node.js 24+
- npm 11+
- Angular CLI 21+
npm installnpm run buildOr build in watch mode:
npm run watchnpm run testRun lint checks:
npm run lintAuto-fix issues:
npm run lint:fixCheck formatting:
npm run format:checkAuto-format the code:
npm run formatFor detailed usage guidelines, see the library README.
- Angular 21+
- TypeScript 5.9+
- RxJS 7.8+
- es-toolkit 1.41+
- Vitest 4+ (for testing)
This project is distributed under the MIT license.