### File

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

### Description

Displays navigation segments and handles overflow with ellipsis.

### Extends

`ECLBaseDirective`

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `ecl-breadcrumb`
imports | `NgTemplateOutlet` `TranslateModule` `EUI_ECL_BUTTON` `EclBreadcrumbSegmentComponent`
styles | `:host { display: block; }`
templateUrl | `./ecl-breadcrumb.component.html`

### Index

###### Properties
ariaLabel breadcrumbContainer eclBreadcrumbContainer eclEllipsisSegment eclSegments role
###### Methods
onEllipsisSegmentClick onWindowResize getCssClasses
###### Inputs
isExpanded class e2eAttr tabindex
###### HostBindings
attr.aria-label attr.data-ecl-auto-initialized attr.role class
###### HostListeners
window:resize
###### Accessors
cssClasses autoInitialized hasContainer

### Constructor

`constructor(el: ElementRef, translate: TranslateService, renderer: Renderer2)`
Parameters :
Name | Type | Optional
el | `ElementRef` | No
translate | `TranslateService` | No
renderer | `Renderer2` | No

### Inputs

isExpanded
Type : `boolean`
Default value : `false`
Expands all breadcrumb segments instead of collapsing them.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

attr.aria-label
Type : `any`
ARIA label describing the breadcrumb purpose.

attr.data-ecl-auto-initialized
Type : `boolean | null`
Returns true if breadcrumb was auto-initialized.

attr.role
Type : `string`
Default value : `'navigation'`
ARIA role attribute for accessibility.

class
Type : `string`
CSS classes applied to the breadcrumb element.

### HostListeners

window:resize
Arguments : `'$event'`
`window:resize()`
Handles window resize and recalculates overflown segments.

### Methods

onEllipsisSegmentClick
`onEllipsisSegmentClick(evt: MouseEvent)`
Expands hidden breadcrumb segments after clicking ellipsis. Parameters :
Name | Type | Optional
evt | `MouseEvent` | No
Returns : `void`

onWindowResize
`onWindowResize()`
Decorators : `@HostListener('window:resize', ['$event'])`
Handles window resize and recalculates overflown segments. Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

ariaLabel
Decorators : `@HostBinding('attr.aria-label')`
ARIA label describing the breadcrumb purpose.

breadcrumbContainer
To be removed in v20. Not needed, replaced by 'eclBreadcrumbContainer'
Type : `ElementRef`
Decorators : `@ViewChild('breadcrumbContainer')`

eclBreadcrumbContainer
Type : `EclBreadcrumbContainerDirective`
Decorators : `@ContentChild(EclBreadcrumbContainerDirective)`
Reference to the breadcrumb container directive inside this component.

eclEllipsisSegment
Type : `EclBreadcrumbSegmentComponent`
Decorators : `@ViewChild('ellipsisSegment')`
Reference to the ellipsis segment element.

eclSegments
Type : `QueryList<EclBreadcrumbSegmentComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`
List of breadcrumb segment components.

role
Type : `string`
Default value : `'navigation'`
Decorators : `@HostBinding('attr.role')`
ARIA role attribute for accessibility.

### Accessors

cssClasses
get `cssClasses()`
CSS classes applied to the breadcrumb element. Returns : `string`

autoInitialized
get `autoInitialized()`
Returns true if breadcrumb was auto-initialized. Returns : `boolean | null`

hasContainer
get `hasContainer()`
Returns true if breadcrumb container directive exists. Returns : `boolean`

# results matching ""

# No results matching ""