### 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.Default`
selector | `eui-breadcrumb-item`
imports | `RouterModule` `PortalModule` `EUI_ICON` `EUI_ICON_BUTTON`
templateUrl | `breadcrumb-item.component.html`
styleUrl | `./breadcrumb-item.component.scss`

### Index

###### Properties

- collapsed
- elementRef
- hasNext
- hasPrevious
- string
- width

###### Methods

- destroy
- onClick
- setNext
- setPrevious

###### Inputs

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

###### HostBindings

- class

### Inputs

ariaLabel
Type : `string`
Default value : `'Breadcrumb item icon'`
ARIA label for the breadcrumb item icon for accessibility. Provides screen reader description of the icon.

iconSvgName
Type : `string`
SVG icon name displayed alongside the breadcrumb label. Follows EUI icon naming convention (e.g., 'home:outline'). Optional.

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

label
Type : `string`
Text label displayed for the breadcrumb item. May be truncated if too long to fit available space. Required for item display.

link
Type : `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
Type : `NavigationExtras`
Additional navigation options passed to Angular Router. Supports query params, fragments, state, and other NavigationExtras properties. Optional.

### HostBindings

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

### 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

collapsed
Type : `unknown`
Default value : `false`
state of breadcrumb item in case of collapsed

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

hasNext
Type : `unknown`
Default value : `false`

hasPrevious
Type : `unknown`
Default value : `false`

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

width
Type : `number`
Default value : `0`
calculated item width

# results matching ""

# No results matching ""