A modern, reactive breadcrumb navigation component for Angular 19+ using Signals
npm install ngx-signal-breadcrumbsA modern, reactive breadcrumb navigation component for Angular 19+ using Signals.
- 🚀 Reactive with Signals - Automatically updates on route changes
- 🎨 Customizable - CSS variables for easy theming
- ♿ Accessible - ARIA labels and semantic HTML
- 📦 Lightweight - Minimal dependencies
- 🔧 TypeScript - Full type safety
- ✨ Standalone - No module imports needed
You can see a live demo of the component in action here: https://carlesra.github.io/ngx-signal-breadcrumbs
The sandbox project in this workspace serves as a demo application to showcase the features and usage of ngx-signal-breadcrumbs. You can explore the source code to see real-world implementation examples.
bash
npm install ngx-signal-breadcrumbs
`Quick Start
$3
Add breadcrumb data to your route configuration:
typescript
import { Routes } from '@angular/router';export const routes: Routes = [
{
path: 'products',
data: { breadcrumb: 'Products' },
children: [
{
path: ':id',
data: {
breadcrumb: (route) =>
Product ${route.params['id']}
}
}
]
}
];
$3
typescript
import { Component } from '@angular/core';
import { SignalBreadcrumbsComponent } from 'ngx-signal-breadcrumbs';@Component({
selector: 'app-root',
standalone: true,
imports: [SignalBreadcrumbsComponent],
template:
})
export class AppComponent {}
That's it! 🎉
API Reference
$3
| Input | Type | Default | Description |
|-------|------|---------|-------------|
|
| boolean | true | Show home icon as first item |
| separator | IconName | 'chevron-right' | Icon separator between items |
| linkColor | string | '#3b82f6' | Color for clickable links |
| linkHoverColor | string | '#93c5fd' | Color for links on hover |
| separatorColor | string | '#94a3b8' | Color for separators |$3
`typescript
interface BreadcrumbData {
breadcrumb: string | ((route: ActivatedRouteSnapshot) => string) | null;
}
`Examples
$3
typescript
{
path: 'about',
data: { breadcrumb: 'About Us' }
}
`$3
typescript
{
path: 'user/:id',
data: {
breadcrumb: (route: ActivatedRouteSnapshot) => {
const userId = route.params['id'];
return User ${userId};
}
}
}
`$3
Set
to exclude a route from the breadcrumb trail:
`typescript
{
path: '',
component: ProductListComponent,
data: { breadcrumb: null }
}
`$3
typescript
[separator]="'chevron-right'"
[linkColor]="'#3b82f6'"
[linkHoverColor]="'#93c5fd'"
[separatorColor]="'#94a3b8'"
/>
`$3
Override these CSS variables for advanced styling:
css
ngx-signal-breadcrumbs {
--breadcrumb-link-color: #374151;
--breadcrumb-link-hover-color: #93c5fd;
--breadcrumb-separator-color: #9ca3af;
--breadcrumb-current-color: #6b7280;
}
`Advanced Usage
$3
Query parameters are automatically preserved in breadcrumb links:
typescript
// URL: /products/123?filter=active
// Breadcrumb link will preserve: /products?filter=active
`$3
The component supports these separator icons:
-
(default)
- chevron-left
-
- - Angular 19+
- TypeScript 5.0+
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Contributions are welcome! Please feel free to submit a Pull Request.
MIT © Juan Carlos Ramos Moll