### File

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

### Description

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.

Example :

    <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

### Implements

`OnDestroy` `OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
host | `{ }`
selector | `eui-breadcrumb-item`
imports | `RouterModule` `PortalModule` `EUI_ICON` `EUI_ICON_BUTTON`
templateUrl | `breadcrumb-item.component.html`
styleUrl | `./breadcrumb-item.component.scss`

### Index

###### Properties

- Readonly collapsed
- Readonly elementRef
- Readonly hasNext
- Readonly hasPrevious
- Readonly width

###### Methods

- destroy
- onClick
- setNext
- setPrevious

###### Inputs

- ariaLabel
- iconSvgName
- id
- label
- link
- navigationExtras

### Inputs

ariaLabel
Default value : `'Breadcrumb item icon'`
ARIA label for the icon.

iconSvgName
Type : `string`
SVG icon name (e.g., 'home:outline').

id
Type : `string`
Unique identifier for the breadcrumb item. Auto-generated if not provided.

label
Type : `string`
Text label displayed for the breadcrumb item.

link
Type : `string | RouterCommands`
Navigation target: URL string, Router commands array, or null.

navigationExtras
Type : `NavigationExtras`
Additional Angular Router navigation options.

### Methods

destroy
`destroy()`
Returns : `void`

onClick
`onClick()`
A callback to navigate to the given link using ng-router. Returns : `boolean`

setNext
`setNext(breadcrumbItem: EuiBreadcrumbItemComponent)`

Sets the next breadcrumb item in the navigation chain. Called internally by parent eui-breadcrumb component to establish item relationships.

Parameters :

Name | Type | Optional
breadcrumbItem | `EuiBreadcrumbItemComponent` | No

Returns : `void`

setPrevious
`setPrevious(breadcrumbItem: EuiBreadcrumbItemComponent)`

Sets the previous breadcrumb item in the navigation chain. Called internally by parent eui-breadcrumb component to establish item relationships.

Parameters :

Name | Type | Optional
breadcrumbItem | `EuiBreadcrumbItemComponent` | No

Returns : `void`

### Properties

Readonly collapsed
Type : `unknown`
Default value : `signal(false)`
state of breadcrumb item in case of collapsed

Readonly elementRef
Type : `unknown`
Default value : `inject(ElementRef)`

Readonly hasNext
Type : `unknown`
Default value : `signal(false)`

Readonly hasPrevious
Type : `unknown`
Default value : `signal(false)`

Readonly width
Type : `unknown`
Default value : `signal(0)`
calculated item width

# results matching ""

# No results matching ""