eui documentation
  1. Components
  2. EuiBreadcrumbItemComponent

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
Methods
Inputs
HostBindings

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