### File

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

### Description

Displays navigation segments and handles overflow with ellipsis.

### Extends

`ECLBaseDirective`

### Implements

`AfterViewInit` `OnDestroy`

### Metadata

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

### Index

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

### Constructor

`constructor()`

### Inputs

isExpanded
Default value : `false, { transform: booleanAttribute }`
Expands all breadcrumb segments instead of collapsing them.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

attr.aria-label
Type : `any`

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.

### Methods

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

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

### Properties

ariaLabel
Type : `unknown`
Default value : `toSignal(inject(TranslateService).stream('ecl.breadcrumb.YOU-ARE-HERE'))`
ARIA label describing the breadcrumb purpose.

eclBreadcrumbContainer
Type : `unknown`
Default value : `contentChild(EclBreadcrumbContainerDirective, { read: ElementRef })`
Reference to the breadcrumb container directive inside this component.

eclEllipsisSegment
Type : `unknown`
Default value : `viewChild.required<EclBreadcrumbSegmentComponent>('ellipsisSegment')`
Reference to the ellipsis segment element.

eclSegments
Type : `unknown`
Default value : `contentChildren(forwardRef(() => EclBreadcrumbSegmentComponent), { descendants: true })`
List of breadcrumb segment components.

hasContainer
Type : `unknown`
Default value : `computed(() => !!this.eclBreadcrumbContainer())`
Returns true if breadcrumb container directive exists.

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

### Accessors

ariaLabelBinding
get `ariaLabelBinding()`

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`

# results matching ""

# No results matching ""