# EuiBreadcrumbItemComponent

**Type:** component



Individual breadcrumb item component representing a single segment in the breadcrumb navigation path.
Provides clickable navigation links with optional icons and automatic relationship management with adjacent items.
Supports Angular Router navigation with both internal routes and external URLs.
Automatically generates unique IDs when not provided and manages collapsed state for responsive layouts.
Used within eui-breadcrumb container for hierarchical navigation display.

```html
<eui-breadcrumb>
  <!-- Home with icon only -->
  <eui-breadcrumb-item
    link="/"
    iconSvgName="home:outline"
    ariaLabel="Home">
  </eui-breadcrumb-item>

  <!-- Standard item with label -->
  <eui-breadcrumb-item
    link="/products"
    label="Products">
  </eui-breadcrumb-item>

  <!-- Item with navigation extras -->
  <eui-breadcrumb-item
    link="/products/search"
    label="Search Results"
    [navigationExtras]="{ queryParams: { q: 'laptop' } }">
  </eui-breadcrumb-item>

  <!-- Current page (no link) -->
  <eui-breadcrumb-item label="Product Details"></eui-breadcrumb-item>
</eui-breadcrumb>
```

### Accessibility
- Each item is keyboard accessible with Enter/Space activation
- ariaLabel provides screen reader context for icon-only items
- Non-linked items (current page) are not focusable
- Label text is announced by screen readers
- Icon and label combination provides visual and semantic meaning

### Notes
- Must be used within eui-breadcrumb parent component
- id is auto-generated if not provided
- link supports string URLs, Angular Router commands (array), or null for non-clickable items
- External URLs (starting with 'http') open in same window
- navigationExtras passes options to Angular Router (queryParams, fragment, etc.)
- iconSvgName follows EUI icon naming convention
- Last item in breadcrumb typically has no link (represents current page)
- Label may be truncated in responsive layouts
- Previous/next relationships are managed automatically by parent component


**Selector:** `eui-breadcrumb-item`

## Inputs
- **ariaLabel**: `string` - ARIA label for the breadcrumb item icon for accessibility. Provides screen reader description of the icon.
- **iconSvgName**: `string` - SVG icon name displayed alongside the breadcrumb label. Follows EUI icon naming convention (e.g., 'home:outline'). Optional.
- **id**: `string` - Unique identifier for the breadcrumb item. Automatically generated if not provided. Optional.
- **label**: `string` - Text label displayed for the breadcrumb item. May be truncated if too long to fit available space. Required for item display.
- **link**: `string | any[]` - Navigation target for the breadcrumb item. Supports Angular Router commands (array), URL string, or null to disable link. String starting with 'http' opens as external URL. Optional - when null/undefined, item is not clickable.
- **navigationExtras**: `NavigationExtras` - Additional navigation options passed to Angular Router. Supports query params, fragments, state, and other NavigationExtras properties. Optional.