Breadcrumb

Navigation trail showing the current page location within a hierarchy. Icons are rendered via content projection — pass a <ng-template ngOatBreadcrumbIcon> to render any icon library you prefer.

Input	Type	Default	Description
`items`	`OatBreadcrumbItem[]`	required	Array of breadcrumb items

Output	Type	Description
`navigate`	`OatBreadcrumbItem`	Emitted when a breadcrumb link is clicked

OatBreadcrumbItem Interface
Property	Type	Required	Description
`label`	`string`	Yes	Display text
`url`	`string`	No	Navigation URL
`icon`	`string`	No	Icon key passed to the projected icon template

Content Projection
Directive	Context	Description
`ngOatBreadcrumbIcon`	`let-icon` (the item's `icon` string)	Template to render an icon for each item that has an `icon` key

Import & Usage

typescript

import { Component } from '@angular/core';
import {
  NgOatBreadcrumb,
  NgOatBreadcrumbIcon,
  type OatBreadcrumbItem,
} from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatBreadcrumb, NgOatBreadcrumbIcon],
  template: `
    <ng-oat-breadcrumb [items]="crumbs" (navigate)="onNav($event)">
      <!-- Project any icon library via the icon template -->
      <ng-template ngOatBreadcrumbIcon let-icon>
        <i class="lucide lucide-{{ icon }}"></i>
      </ng-template>
    </ng-oat-breadcrumb>
  `,
})
export class ExampleComponent {
  crumbs: OatBreadcrumbItem[] = [
    { label: 'Home', url: '/', icon: 'home' },
    { label: 'Docs', url: '/docs', icon: 'book-open' },
    { label: 'Current Page' },
  ];

  onNav(item: OatBreadcrumbItem) {
    console.log('Navigate to:', item.label);
  }
}

Basic Breadcrumb

html

<ng-oat-breadcrumb
  [items]="[
    { label: 'Home', url: '/' },
    { label: 'Components', url: '/components' },
    { label: 'Breadcrumb' }
  ]"
  (navigate)="onNavigate($event)">
</ng-oat-breadcrumb>

With Icons (Content Projection)

Project a <ng-template ngOatBreadcrumbIcon> to render icons. The template receives the item's icon string as implicit context. Use any icon library — Lucide, Material, FontAwesome, or inline SVG.

html

<!-- Items carry an icon "key", the template renders it -->
<ng-oat-breadcrumb [items]="crumbs" (navigate)="onNav($event)">
  <ng-template ngOatBreadcrumbIcon let-icon>
    <!-- You choose how to render: inline SVG, icon font, component, etc. -->
    <my-icon [name]="icon" size="16" />
  </ng-template>
</ng-oat-breadcrumb>

// In your component:
crumbs: OatBreadcrumbItem[] = [
  { label: 'Home',       url: '/',           icon: 'home' },
  { label: 'Components', url: '/components', icon: 'folder' },
  { label: 'Breadcrumb',                     icon: 'file' },
];

Mixed (Icons + Plain)

Items without an icon property render without an icon — no template is projected for those items.

html

<!-- Items without "icon" render without an icon -->
<ng-oat-breadcrumb [items]="crumbs">
  <ng-template ngOatBreadcrumbIcon let-icon>
    <my-icon [name]="icon" size="16" />
  </ng-template>
</ng-oat-breadcrumb>

// In your component:
crumbs: OatBreadcrumbItem[] = [
  { label: 'Home',     url: '/',                    icon: 'home' },
  { label: 'Settings', url: '/settings',            icon: 'settings' },
  { label: 'Packages', url: '/settings/packages',   icon: 'package' },
  { label: 'ng-oat' },  // ← no icon
];

Deep Hierarchy

html

<ng-oat-breadcrumb
  [items]="[
    { label: 'Home', url: '/' },
    { label: 'Docs', url: '/docs' },
    { label: 'API Reference', url: '/docs/api' },
    { label: 'Components', url: '/docs/api/components' },
    { label: 'Breadcrumb' }
  ]">
</ng-oat-breadcrumb>

With Any Icon Library

The content-projection pattern works with any icon approach. Here are examples for popular libraries:

html

<!-- Lucide Angular -->
<ng-oat-breadcrumb [items]="crumbs">
  <ng-template ngOatBreadcrumbIcon let-icon>
    <lucide-icon [name]="icon" [size]="16" />
  </ng-template>
</ng-oat-breadcrumb>

html

<!-- Angular Material Icons -->
<ng-oat-breadcrumb [items]="crumbs">
  <ng-template ngOatBreadcrumbIcon let-icon>
    <mat-icon style="font-size:16px; width:16px; height:16px">{{ icon }}</mat-icon>
  </ng-template>
</ng-oat-breadcrumb>

html

<!-- Font Awesome -->
<ng-oat-breadcrumb [items]="crumbs">
  <ng-template ngOatBreadcrumbIcon let-icon>
    <fa-icon [icon]="['fas', icon]" size="sm" />
  </ng-template>
</ng-oat-breadcrumb>