packages/ecl/components/ecl-breadcrumb/ecl-breadcrumb.component.ts
Displays navigation segments and handles overflow with ellipsis.
| selector | ecl-breadcrumb, nav[eclBreadcrumb] |
| imports |
NgTemplateOutlet
TranslateModule
EUI_ECL_BUTTON
EclBreadcrumbSegmentComponent
|
| styles |
:host {
display: block;
}
|
| templateUrl | ./ecl-breadcrumb.component.html |
Properties |
Methods |
Inputs |
HostBindings |
Accessors |
constructor()
|
| isExpanded |
Default value : false, { transform: booleanAttribute }
|
|
Expands all breadcrumb segments instead of collapsing them. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| 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. |
| onEllipsisSegmentClick | ||||||
onEllipsisSegmentClick(evt: MouseEvent)
|
||||||
|
Expands hidden breadcrumb segments after clicking ellipsis.
Parameters :
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| 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. |
| ariaLabelBinding |
getariaLabelBinding()
|
| cssClasses |
getcssClasses()
|
|
CSS classes applied to the breadcrumb element.
Returns :
string
|
| autoInitialized |
getautoInitialized()
|
|
Returns true if breadcrumb was auto-initialized.
Returns :
boolean | null
|