feat(breadcrumb): Add IgxBreadcrumb component

projects/igniteui-angular/breadcrumb/README.md

@@ -0,0 +1,143 @@
+# IgxBreadcrumb
+
+The `IgxBreadcrumb` component provides a navigation trail showing the user's current location within a site hierarchy.
+
+## Usage
+
+### Basic Usage
+
+```html
+<igx-breadcrumb>
+  <igx-breadcrumb-item [routerLink]="['/home']" icon="home">Home</igx-breadcrumb-item>
+  <igx-breadcrumb-item [routerLink]="['/products']">Products</igx-breadcrumb-item>
+  <igx-breadcrumb-item [routerLink]="['/products', 'electronics']">Electronics</igx-breadcrumb-item>
+  <igx-breadcrumb-item [disabled]="true">Laptops</igx-breadcrumb-item>
+</igx-breadcrumb>
+```
+
+### Standalone Components
+
+```typescript
+import { IGX_BREADCRUMB_DIRECTIVES } from 'igniteui-angular/breadcrumb';
+
+@Component({
+  imports: [...IGX_BREADCRUMB_DIRECTIVES]
+})
+export class MyComponent {}
+```
+
+### NgModule
+
+```typescript
+import { IgxBreadcrumbModule } from 'igniteui-angular/breadcrumb';
+
+@NgModule({
+  imports: [IgxBreadcrumbModule]
+})
+export class MyModule {}
+```
+
+## Features
+
+### Custom Separator
+
+```html
+<igx-breadcrumb separator="/">
+  <!-- items -->
+</igx-breadcrumb>
+```
+
+Or use a custom template:
+
+```html
+<igx-breadcrumb>
+  <ng-template igxBreadcrumbSeparator>
+    <igx-icon>arrow_forward</igx-icon>
+  </ng-template>
+  <!-- items -->
+</igx-breadcrumb>
+```
+
+### Overflow/Collapse Behavior
+
+When you have many breadcrumb items, you can limit the visible items:
+
+```html
+<igx-breadcrumb [maxItems]="4" [itemsBeforeCollapse]="1" [itemsAfterCollapse]="2">
+  <!-- items -->
+</igx-breadcrumb>
+```
+
+This will show the first item, an ellipsis (...), and the last 2 items.
+
+### Router Integration
+
+Use the `IgxBreadcrumbService` to automatically generate breadcrumbs from route configuration:
+
+```typescript
+// Route configuration
+const routes: Routes = [
+  { path: '', data: { breadcrumb: 'Home' }, component: HomeComponent },
+  { 
+    path: 'products', 
+    data: { breadcrumb: 'Products' },
+    children: [
+      { path: ':id', data: { breadcrumb: 'Product Details' }, component: ProductComponent }
+    ]
+  }
+];
+```
+
+```typescript
+// Component
+@Component({...})
+export class AppComponent {
+  breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+
+  constructor(private breadcrumbService: IgxBreadcrumbService) {}
+}
+```
+
+```html
+<igx-breadcrumb>
+  @for (item of breadcrumbs$ | async; track item.label) {
+    <igx-breadcrumb-item 
+      [routerLink]="item.routerLink" 
+      [disabled]="item.disabled"
+      [icon]="item.icon">
+      {{ item.label }}
+    </igx-breadcrumb-item>
+  }
+</igx-breadcrumb>
+```
+
+## Inputs
+
+### IgxBreadcrumbComponent
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `separator` | `string` | `'›'` | Custom separator character between crumbs |
+| `maxItems` | `number` | - | Maximum number of visible items before overflow |
+| `itemsBeforeCollapse` | `number` | `1` | Number of items visible before the collapsed section |
+| `itemsAfterCollapse` | `number` | `1` | Number of items visible after the collapsed section |
+| `type` | `BreadcrumbType` | `'location'` | Breadcrumb type: 'location', 'attribute', or 'dynamic' |
+
+### IgxBreadcrumbItemComponent
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `link` | `string` | - | Navigation URL (standard href) |
+| `routerLink` | `string \| any[]` | - | Angular Router link |
+| `disabled` | `boolean` | `false` | Whether the item is non-clickable |
+| `icon` | `string` | - | Icon name to display |
+
+## Accessibility
+
+The component follows WAI-ARIA best practices:
+
+- Uses `role="navigation"` on the component
+- Uses `aria-label="breadcrumb"` for screen readers
+- Uses semantic `<ol>` and `<li>` elements
+- Adds `aria-current="page"` to the current/last item
+- Supports keyboard navigation with Tab/Shift+Tab

projects/igniteui-angular/breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './src/public_api';

projects/igniteui-angular/breadcrumb/ng-package.json

@@ -0,0 +1,2 @@
+{
+}

projects/igniteui-angular/breadcrumb/src/breadcrumb/breadcrumb-item.component.html

@@ -0,0 +1,29 @@
+@if (disabled) {
+    <span class="igx-breadcrumb-item__text" [attr.aria-current]="isCurrent ? 'page' : null">
+        @if (icon) {
+            <igx-icon>{{ icon }}</igx-icon>
+        }
+        <ng-content></ng-content>
+    </span>
+} @else if (routerLink) {
+    <a class="igx-breadcrumb-item__link" [routerLink]="routerLink">
+        @if (icon) {
+            <igx-icon>{{ icon }}</igx-icon>
+        }
+        <ng-content></ng-content>
+    </a>
+} @else if (link) {
+    <a class="igx-breadcrumb-item__link" [href]="link">
+        @if (icon) {
+            <igx-icon>{{ icon }}</igx-icon>
+        }
+        <ng-content></ng-content>
+    </a>
+} @else {
+    <span class="igx-breadcrumb-item__text" [attr.aria-current]="isCurrent ? 'page' : null">
+        @if (icon) {
+            <igx-icon>{{ icon }}</igx-icon>
+        }
+        <ng-content></ng-content>
+    </span>
+}

projects/igniteui-angular/breadcrumb/src/breadcrumb/breadcrumb-item.component.scss

@@ -0,0 +1,50 @@
+@use 'sass:map';
+
+:host {
+    display: flex;
+    align-items: center;
+}
+
+.igx-breadcrumb-item__link,
+.igx-breadcrumb-item__text {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    text-decoration: none;
+    color: inherit;
+    white-space: nowrap;
+}
+
+.igx-breadcrumb-item__link {
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+        border-radius: 2px;
+    }
+}
+
+:host(.igx-breadcrumb-item--disabled) {
+    .igx-breadcrumb-item__text {
+        cursor: default;
+    }
+}
+
+:host(.igx-breadcrumb-item--current) {
+    .igx-breadcrumb-item__text {
+        font-weight: 600;
+    }
+}
+
+:host(.igx-breadcrumb-item--hidden) {
+    display: none;
+}

projects/igniteui-angular/breadcrumb/src/breadcrumb/breadcrumb-item.component.ts

@@ -0,0 +1,126 @@
+import {
+    Component,
+    ElementRef,
+    HostBinding,
+    Input,
+    booleanAttribute
+} from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+
+let NEXT_ID = 0;
+
+/**
+ * IgxBreadcrumbItem represents a single item in the breadcrumb trail.
+ *
+ * @igxModule IgxBreadcrumbModule
+ *
+ * @igxKeywords breadcrumb item, crumb
+ *
+ * @igxGroup Navigation
+ *
+ * @remarks
+ * The breadcrumb item component can be used with standard href links, Angular router links,
+ * or as a disabled/non-clickable element for the current location.
+ *
+ * @example
+ * ```html
+ * <igx-breadcrumb-item [routerLink]="['/home']" icon="home">Home</igx-breadcrumb-item>
+ * <igx-breadcrumb-item [disabled]="true">Current Page</igx-breadcrumb-item>
+ * ```
+ */
+@Component({
+    selector: 'igx-breadcrumb-item',
+    templateUrl: 'breadcrumb-item.component.html',
+    styleUrl: 'breadcrumb-item.component.scss',
+    standalone: true,
+    imports: [RouterLink, IgxIconComponent],
+    host: {
+        'role': 'listitem'
+    }
+})
+export class IgxBreadcrumbItemComponent {
+    /**
+     * Sets the value of the `id` attribute. If not provided it will be automatically generated.
+     *
+     * @example
+     * ```html
+     * <igx-breadcrumb-item [id]="'breadcrumb-item-1'" [routerLink]="['/home']">Home</igx-breadcrumb-item>
+     * ```
+     */
+    @HostBinding('attr.id')
+    @Input()
+    public id = `igx-breadcrumb-item-${NEXT_ID++}`;
+
+    /**
+     * Navigation URL (standard href).
+     *
+     * @example
+     * ```html
+     * <igx-breadcrumb-item link="/products">Products</igx-breadcrumb-item>
+     * ```
+     */
+    @Input()
+    public link: string;
+
+    /**
+     * Angular Router integration for navigation.
+     *
+     * @example
+     * ```html
+     * <igx-breadcrumb-item [routerLink]="['/products', 'electronics']">Electronics</igx-breadcrumb-item>
+     * ```
+     */
+    @Input()
+    public routerLink: string | any[];
+
+    /**
+     * Whether the item is disabled/non-clickable.
+     * Typically used for the current location (last item).
+     *
+     * @example
+     * ```html
+     * <igx-breadcrumb-item [disabled]="true">Current Page</igx-breadcrumb-item>
+     * ```
+     */
+    @Input({ transform: booleanAttribute })
+    public disabled = false;
+
+    /**
+     * Optional icon name to display before the item label.
+     *
+     * @example
+     * ```html
+     * <igx-breadcrumb-item icon="home" [routerLink]="['/home']">Home</igx-breadcrumb-item>
+     * ```
+     */
+    @Input()
+    public icon: string;
+
+    /** @hidden */
+    @HostBinding('class.igx-breadcrumb-item')
+    public cssClass = true;
+
+    /** @hidden */
+    @HostBinding('class.igx-breadcrumb-item--disabled')
+    public get disabledClass(): boolean {
+        return this.disabled;
+    }
+
+    /** @hidden */
+    @HostBinding('class.igx-breadcrumb-item--current')
+    public isCurrent = false;
+
+    /** @hidden */
+    @HostBinding('class.igx-breadcrumb-item--hidden')
+    public isHidden = false;
+
+    constructor(public elementRef: ElementRef<HTMLElement>) {}
+
+    /**
+     * Returns the display label of the breadcrumb item.
+     */
+    public get label(): string {
+        return this.elementRef.nativeElement.textContent?.trim() || '';
+    }
+}

projects/igniteui-angular/breadcrumb/src/breadcrumb/breadcrumb.common.ts

@@ -0,0 +1,23 @@
+/**
+ * The type of breadcrumb display behavior.
+ * - `location`: Used for navigation schemes with multiple levels of hierarchy
+ * - `attribute`: Displays the full crumb items trail
+ * - `dynamic`: Path-based breadcrumbs showing the path taken to arrive at a page
+ */
+export type BreadcrumbType = 'location' | 'attribute' | 'dynamic';
+
+/**
+ * Interface representing a breadcrumb item.
+ */
+export interface IBreadcrumbItem {
+    /** The display label for the breadcrumb item */
+    label: string;
+    /** The URL for standard navigation */
+    link?: string;
+    /** Angular router link for navigation */
+    routerLink?: string | any[];
+    /** Whether the item is disabled/non-clickable */
+    disabled?: boolean;
+    /** Optional icon name to display */
+    icon?: string;
+}

projects/igniteui-angular/breadcrumb/src/breadcrumb/breadcrumb.component.html

@@ -0,0 +1,4 @@
+<ol class="igx-breadcrumb__list">
+    <ng-content select="[igxBreadcrumbSeparator]"></ng-content>
+    <ng-content></ng-content>
+</ol>