Breadcrumbs

<flx-breadcrumbs [items]="breadcrumbsWithIcons"></flx-breadcrumbs>

export class DashboardPage {
  breadcrumbsWithIcons = [
    { label: 'Home', url: '/', icon: 'home' },
    { label: 'Settings', url: '/settings', icon: 'settings' },
    { label: 'Profile', active: true, icon: 'user' }
  ];
}

<flx-breadcrumbs
  [items]="breadcrumbs"
  separator=">">
</flx-breadcrumbs>

<flx-breadcrumbs
  [items]="breadcrumbs"
  separator="→">
</flx-breadcrumbs>

<flx-breadcrumbs
  [items]="longBreadcrumbs"
  [maxItems]="4">
</flx-breadcrumbs>

export class DeepPage {
  longBreadcrumbs = [
    { label: 'Home', url: '/' },
    { label: 'Level 1', url: '/level1' },
    { label: 'Level 2', url: '/level1/level2' },
    { label: 'Level 3', url: '/level1/level2/level3' },
    { label: 'Level 4', url: '/level1/level2/level3/level4' },
    { label: 'Current Page', active: true }
  ];
}

<flx-breadcrumbs
  [items]="breadcrumbs"
  (itemClick)="onBreadcrumbClick($event)">
</flx-breadcrumbs>

import { ActivatedRoute, Router } from '@angular/router';

export class DynamicBreadcrumbs implements OnInit {
  breadcrumbs: BreadcrumbItem[] = [];

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.buildBreadcrumbs();
  }

  buildBreadcrumbs() {
    const urlSegments = this.router.url.split('/').filter(segment => segment);
    this.breadcrumbs = [
      { label: 'Home', url: '/', icon: 'home' }
    ];

    let currentUrl = '';
    urlSegments.forEach((segment, index) => {
      currentUrl += `/${segment}`;
      this.breadcrumbs.push({
        label: this.formatLabel(segment),
        url: currentUrl,
        active: index === urlSegments.length - 1
      });
    });
  }

  formatLabel(segment: string): string {
    return segment.replace(/-/g, ' ')
      .split(' ')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  }

  onBreadcrumbClick(item: BreadcrumbItem) {
    if (item.url) {
      this.router.navigate([item.url]);
    }
  }
}

// In your routing module
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: { breadcrumb: 'Home' }
  },
  {
    path: 'products',
    component: ProductsComponent,
    data: { breadcrumb: 'Products' },
    children: [
      {
        path: ':id',
        component: ProductDetailComponent,
        data: { breadcrumb: 'Product Details' }
      }
    ]
  }
];

// In your breadcrumb service
@Injectable({ providedIn: 'root' })
export class BreadcrumbService {
  breadcrumbs$ = this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(() => this.buildBreadcrumbs(this.route.root))
  );

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}

  private buildBreadcrumbs(
    route: ActivatedRoute,
    url = '',
    breadcrumbs: BreadcrumbItem[] = []
  ): BreadcrumbItem[] {
    const children = route.children;

    if (children.length === 0) {
      return breadcrumbs;
    }

    for (const child of children) {
      const routeURL = child.snapshot.url.map(segment => segment.path).join('/');
      if (routeURL) {
        url += `/${routeURL}`;
      }

      const label = child.snapshot.data['breadcrumb'];
      if (label) {
        breadcrumbs.push({ label, url });
      }

      return this.buildBreadcrumbs(child, url, breadcrumbs);
    }

    return breadcrumbs;
  }
}