Breadcrumb

shadow

Breadcrumb displays one segment of the navigation path in the application and is a descendant of the Breadcrumbs element. It can also display an icon.

Note

For more information on using Breadcrumbs, navigate to the Breadcrumbs element documentation.

Links And Disabled State

wje-breadcrumb can behave as a real link. The href, target, rel, and download attributes are synced to the internal <a> element, so the component works as a navigation link.

<wje-breadcrumb href="/documents" target="_self">Documents</wje-breadcrumb>

When disabled is present, the breadcrumb removes href from the internal anchor, sets aria-disabled="true", and prevents navigation as well as further click bubbling.

Sizing

--wje-breadcrumb-line-height sets line-height on the wje-breadcrumb host element. The internal .native-breadcrumb link has separate tokens for line-height, margin, and padding:

wje-breadcrumb {
  --wje-breadcrumb-line-height: 24px;
  --wje-breadcrumb-native-line-height: 20px;
  --wje-breadcrumb-native-margin: 0;
  --wje-breadcrumb-native-padding: 4px 12px;
}

--wje-breadcrumb-margin and --wje-breadcrumb-padding remain supported as compatible aliases for the native wrapper.

When to use

Use wje-breadcrumb when the user needs to navigate the application or transition between states/screens.

When not to use

Do not use multiple parallel navigation patterns that compete with each other.

Accessibility

Provide clear active/selected states, predictable tab order, and naming of controls.

Recommended practices

• Keep the URL and UI state in sync to make the navigation reproducible.
• Use consistent terminology for items across menus, breadcrumb and tabs.
• For deep structures, add auxiliary context (breadcrumb, title, icons).

Attributes and properties

ariaLabel

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	aria-label
Typ	any
Predvolené	-

collapsed

Popis	Určuje, či je komponent zbalený.
Atribút	collapsed
Typ	boolean
Predvolené	-

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	false

download

Popis	Riadi správanie voľby download v komponente.
Atribút	download
Typ	any
Predvolené	-

href

Popis	Nastavuje cieľovú URL, keď komponent funguje ako odkaz.
Atribút	href
Typ	string｜null
Predvolené	-

last

Popis	Riadi správanie voľby last v komponente.
Atribút	last
Typ	any
Predvolené	-

rel

Popis	Riadi správanie voľby rel v komponente.
Atribút	rel
Typ	any
Predvolené	-

showCollapsedIndicator

Popis	Riadi správanie voľby show-collapsed-indicator v komponente.
Atribút	show-collapsed-indicator
Typ	any
Predvolené	-

target

Popis	Riadi správanie voľby target v komponente.
Atribút	target
Typ	any
Predvolené	-

title

Popis	Nastavuje zobrazovaný text pre voľbu title.
Atribút	title
Typ	any
Predvolené	-

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

shouldRenderSeparator

Popis	Spustí metódu shouldRenderSeparator na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => boolean

hasVisibleBreadcrumbAfter

Popis	Overí, či komponent obsahuje visible breadcrumb after.
Signatúra	() => boolean

isBreadcrumbVisibleInTrail

Popis	Overí, či je breadcrumb visible in trail aktuálne pravda.
Signatúra	(breadcrumb: Element) => boolean

syncNativeAttributes

Popis	Synchronizuje native attributes s externým alebo interným zdrojom stavu.
Signatúra	() => void

isMobileCollapsedVariant

Popis	Overí, či je mobile collapsed variant aktuálne pravda.
Signatúra	() => boolean

createBreadcrumbDropdown

Popis	Vytvorí breadcrumb dropdown a pripojí ho do štruktúry komponentu.
Signatúra	({ breadcrumbs, trigger, placement = 'bottom' }: any, options: object) => HTMLElement

createCollapsedBreadcrumbMenu

Popis	Vytvorí collapsed breadcrumb menu a pripojí ho do štruktúry komponentu.
Signatúra	(breadcrumbs: Array<HTMLElement>) => HTMLElement

getCollapsedMenuBreadcrumbs

Popis	Vráti collapsed menu breadcrumbs z aktuálneho stavu komponentu.
Signatúra	(isBreakpointMenuIndicator: boolean) => Array<HTMLElement>

collapseMobileVariant

Popis	Spustí metódu collapseMobileVariant na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(variant: string) => HTMLElement

collapseMobileText

Popis	Spustí metódu collapseMobileText na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => HTMLElement

collapseMobileBack

Popis	Spustí metódu collapseMobileBack na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => HTMLElement

collapseMobileParentTitle

Popis	Spustí metódu collapseMobileParentTitle na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => HTMLElement

collapseMobileMenuTitle

Popis	Spustí metódu collapseMobileMenuTitle na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => HTMLElement

collapseMobileSheet

Popis	Spustí metódu collapseMobileSheet na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => HTMLElement

createMobileDropdown

Popis	Vytvorí mobile dropdown a pripojí ho do štruktúry komponentu.
Signatúra	(trigger: HTMLElement) => HTMLElement

createMobileDropdownTrigger

Popis	Vytvorí mobile dropdown trigger a pripojí ho do štruktúry komponentu.
Signatúra	({ icon, iconPosition = 'start', label, ariaLabel, className }: any, options: object) => HTMLElement

createMobileContainer

Popis	Vytvorí mobile container a pripojí ho do štruktúry komponentu.
Signatúra	(className: string) => HTMLElement

createMobileBreadcrumbControl

Popis	Vytvorí mobile breadcrumb control a pripojí ho do štruktúry komponentu.
Signatúra	(breadcrumb: HTMLElement｜null, className: string, { actionable = false, ariaCurrent = false, ariaLabel, icon }: any, options: object) => HTMLElement

getTrailBreadcrumbs

Popis	Vráti trail breadcrumbs z aktuálneho stavu komponentu.
Signatúra	() => Array<HTMLElement>

getCurrentBreadcrumb

Popis	Vráti current breadcrumb z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement｜null

getParentBreadcrumb

Popis	Vráti parent breadcrumb z aktuálneho stavu komponentu.
Signatúra	() => HTMLElement｜null

isBreadcrumbActionable

Popis	Overí, či je breadcrumb actionable aktuálne pravda.
Signatúra	(breadcrumb: HTMLElement｜null) => boolean

forwardBreadcrumbClick

Popis	Spustí metódu forwardBreadcrumbClick na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(breadcrumb: HTMLElement｜null) => void

createCollapsedDropdownTrigger

Popis	Vytvorí collapsed dropdown trigger a pripojí ho do štruktúry komponentu.
Signatúra	(isBreakpointMenuIndicator: boolean) => HTMLElement

getCollapsedDropdownIcon

Popis	Vráti collapsed dropdown ikonu z aktuálneho stavu komponentu.
Signatúra	(isBreakpointMenuIndicator: boolean) => string

populateCollapsedMenuItem

Popis	Spustí metódu populateCollapsedMenuItem na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(menuItem: HTMLElement, breadcrumb: HTMLElement) => void

getBreadcrumbLabel

Popis	Vráti breadcrumb label z aktuálneho stavu komponentu.
Signatúra	(breadcrumb: HTMLElement｜null) => string

getCollapsedMenuItemLabel

Popis	Vráti collapsed menu položku label z aktuálneho stavu komponentu.
Signatúra	(breadcrumb: HTMLElement) => string

humanizeCollapsedMenuItemLabel

Popis	Spustí metódu humanizeCollapsedMenuItemLabel na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: string) => string

isBreakpointMenuIndicator

Popis	Overí, či je breakpoint menu indicator aktuálne pravda.
Signatúra	() => boolean

getBreadcrumbs

Popis	Vráti breadcrumbs z aktuálneho stavu komponentu.
Signatúra	() => Element

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
separator	Štýluje shadow časť separator.

CSS custom variables

Názov	Popis
--wje-breadcrumb-a	Vlastná CSS premenná na štýlovanie komponentu (a).
--wje-breadcrumb-a-hover	Vlastná CSS premenná na štýlovanie komponentu (a hover).
--wje-breadcrumb-line-height	Vlastná CSS premenná, ktorá riadi výšku riadku.
--wje-breadcrumb-native-line-height	Vlastná CSS premenná, ktorá riadi výšku riadku.
--wje-breadcrumb-native-margin	Vlastná CSS premenná, ktorá riadi native margin.
--wje-breadcrumb-native-padding	Vlastná CSS premenná, ktorá riadi native padding.
--wje-breadcrumb-margin	Vlastná CSS premenná, ktorá riadi margin.
--wje-breadcrumb-padding	Vlastná CSS premenná, ktorá riadi padding.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.
separator	Slot pre vlastný oddeľovač medzi položkami.