### File

`packages/components/eui-breadcrumb/breadcrumb.component.ts`

### Description

`eui-breadcrumb` navigation component displaying hierarchical page location with linked path segments. Automatically manages relationships between `eui-breadcrumb` items for proper navigation flow. Detects and coordinates child EuiBreadcrumbItemComponent instances through content projection. Provides semantic navigation structure with automatic previous/next item linking. Typically used for showing user location within site hierarchy and enabling quick navigation to parent pages.

#### Basic breadcrumb navigation

Example :

    <eui-breadcrumb>
      <eui-breadcrumb-item link="/" iconSvgName="home:outline" ariaLabel="Home"></eui-breadcrumb-item>
      <eui-breadcrumb-item link="/products" label="Products"></eui-breadcrumb-item>
      <eui-breadcrumb-item link="/products/electronics" label="Electronics"></eui-breadcrumb-item>
      <eui-breadcrumb-item label="Laptops"></eui-breadcrumb-item>
    </eui-breadcrumb>

#### With navigation extras

Example :

    <eui-breadcrumb>
      <eui-breadcrumb-item link="/" iconSvgName="home:outline"></eui-breadcrumb-item>
      <eui-breadcrumb-item
        link="/services"
        label="Services"
        [navigationExtras]="{ queryParams: { page: 1 } }">
      </eui-breadcrumb-item>
    </eui-breadcrumb>

### Accessibility

- Provides semantic navigation structure for screen readers
- Each item is keyboard accessible and focusable
- ARIA labels on icons provide context for screen reader users
- Current page (last item) is typically not linked
- Separators between items are handled automatically

### Notes

- Must contain eui-breadcrumb-item children for proper functionality
- Automatically establishes previous/next relationships between items
- Items are rendered in the order they appear in the template
- Last item typically represents current page and should not have a link
- Supports responsive behavior with automatic item collapsing
- Uses Angular Router for navigation when links are provided
- External URLs (starting with 'http') open in same window

### Implements

`AfterContentInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
selector | `eui-breadcrumb`
templateUrl | `./breadcrumb.component.html`
styleUrl | `./breadcrumb.component.scss`

### Index

###### Properties

- string

###### HostBindings

- class

### HostBindings

class
Type : `string`
Default value : `'eui-breadcrumb'`

### Properties

string
Type : `string`
Default value : `'eui-breadcrumb'`
Decorators : `@HostBinding('class')`

# results matching ""

# No results matching ""