Breadcrumb

shadow

Breadcrumb zobrazuje jeden segment navigačnej cesty v aplikácii a je potomkom elementu Breadcrumbs. Môže zobrazovať aj ikonu.

Poznámka

Pre viac informácií o použítí Breadcrumbs sa presuňte do dokumentácie elementu Breadcrumbs.

Odkazy a disabled stav

wje-breadcrumb vie fungovať ako reálny odkaz. Atribúty href, target, rel a download sa prenesú na vnútorný <a> element, takže komponent sa správa ako navigačný link.

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

Ak pridáte disabled, breadcrumb odstráni href z vnútorného odkazu, nastaví aria-disabled="true" a zabráni navigácii aj ďalšiemu bublaniu klik eventu.

Úprava rozmerov

--wje-breadcrumb-line-height nastavuje line-height na host elemente wje-breadcrumb. Vnútorný link .native-breadcrumb má samostatné tokeny pre line-height, margin a 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;
}

Premenné --wje-breadcrumb-margin a --wje-breadcrumb-padding ostávajú podporované ako kompatibilné aliasy pre native wrapper.

Kedy použiť

Použite wje-breadcrumb, keď používateľ potrebuje orientáciu v aplikácii alebo prechod medzi stavmi/obrazovkami.

Kedy nepoužiť

Nepoužívajte viac paralelných navigačných vzorov, ktoré si navzájom konkurujú.

Prístupnosť

Zabezpečte jasné active/selected stavy, predvídateľné poradie tabulátora a pomenovanie ovládacích prvkov.

Odporúčané postupy

• Držte URL a UI stav v synchronizácii, aby bola navigácia reprodukovateľná.
• Používajte konzistentné názvoslovie položiek naprieč menu, breadcrumbom a tabmi.
• Pri hlbokých štruktúrach pridajte pomocný kontext (breadcrumb, nadpis, ikony).

Atribúty a vlastnosti

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

Udalosti

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

Metódy

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 tieňové časti

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

CSS vlastné premenné

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.

Sloty

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.