Breadcrumb

import { MagaryBreadcrumb, BreadcrumbItem } from 'ng-magary';

items: BreadcrumbItem[] = [
  { 
    label: 'Dashboard', 
    icon: 'layout-dashboard',
    routerLink: '/dashboard' 
  },
  { 
    label: 'Settings', 
    icon: 'settings',
    routerLink: '/settings' 
  },
  { 
    label: 'Profile',
    icon: 'user'
  }
];

items: BreadcrumbItem[] = [
  { 
    label: 'Home',
    command: (event) => {
      console.log('Home clicked', event);
    }
  },
  { 
    label: 'Products',
    command: (event) => {
      this.loadProducts();
    }
  }
];

items: BreadcrumbItem[] = [
  { label: 'Home', routerLink: '/' },
  { label: 'Archived', disabled: true },
  { label: 'Item' }
];

interface BreadcrumbItem {
  label?: string;
  icon?: string;
  command?: (event?: any) => void;
  url?: string;
  routerLink?: string | any[];
  queryParams?: Record<string, unknown>;
  disabled?: boolean;
  target?: string;
  routerLinkActiveOptions?: IsActiveMatchOptions;
  style?: Record<string, any>;
  styleClass?: string;
  fragment?: string;
  preserveFragment?: boolean;
  skipLocationChange?: boolean;
  replaceUrl?: boolean;
  state?: Record<string, unknown>;
}

<magary-breadcrumb
  [model]="items"
  [styleClass]="'custom-breadcrumb'">
</magary-breadcrumb>

.custom-breadcrumb {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}