Breadcrumbs

shadow

Breadcrumbs is a component that displays the path a user has taken within an application or site. This element displays a hierarchical page layout in which each segment of the Breadcrumb path is a hyperlink, allowing a quick return to previous levels. Breadcrumbs may contain an icon.

Basic usage

The sample shows a basic breadcrumb trail with several levels to make it clear how the navigation path is composed and where the active item is.

Data-driven items

Besides manually slotted wje-breadcrumb elements, you can drive the trail through the items property. The component creates breadcrumb elements from the array and compares subsequent updates against existing DOM by id, so only changed items are updated. You can also pass the same data as a JSON string through the items attribute when configuring the component directly in HTML.

const breadcrumbs = document.querySelector('wje-breadcrumbs');

breadcrumbs.items = [
  { id: 'home', label: '', title: 'Home', href: '/', icon: 'home' },
  { id: 'documents', label: 'Documents', href: '/documents' },
  { id: 'invoice', label: 'Invoice', disabled: true, data: { folderId: 10 } },
];

breadcrumbs.addEventListener('wje-breadcrumbs:item-click', (event) => {
  const { item, index, originalEvent } = event.detail;

  if (item.disabled) {
    event.preventDefault();
  }
});

Each item supports id, label, title, href, icon, disabled, and custom data. For icon-only items without a visible label, use title so the collapsed dropdown can display readable text. Clicking a data-driven item dispatches wje-breadcrumbs:item-click; if the listener calls event.preventDefault(), the original navigation is stopped.

Use with icons

The sample adds icons directly to breadcrumb items. It's useful when you need to distinguish sections more quickly visually, not just by text.

Custom separator icon

The sample changes the default breadcrumb separator to a custom icon. This is useful when you want to bring the trail closer to the visual style of the rest of the app.

Collapsible breadcrumb

Maximum number of items

If there are more items in the list than the value of maxItems, the list is collapsed. By default, only the first and last entries are displayed.

If you want breadcrumbs to collapse only below a specific viewport width, add the breakpoint attribute. It supports the sm, md, lg, xl, 2xl/xxl tokens as well as a direct pixel value. Above the breakpoint, the trail remains expanded even when it has more items than max-items.

For toolbars or narrow headers, you can hide the whole trail behind one compact control below the breakpoint with breakpoint-collapse="menu". Above the breakpoint, regular max-items shortening remains active; below the breakpoint, only the compact indicator remains in the toolbar and all breadcrumb items move into its mobile view or dropdown.

The mobile view is controlled by collapsed-variant. The existing dropdown value remains supported. Compact header variants are also available: text, back, parent-title, menu-title, and sheet. For a disk or file manager, collapsed-variant="back" is recommended because it shows the parent action and the current title:

<wje-breadcrumbs breakpoint="lg" breakpoint-collapse="menu" collapsed-variant="back">
  <wje-breadcrumb href="/disk">Disk</wje-breadcrumb>
  <wje-breadcrumb href="/disk/personal">Personal</wje-breadcrumb>
  <wje-breadcrumb>TESTS</wje-breadcrumb>
</wje-breadcrumbs>

You can change the default hamburger in this mode with breakpoint-collapse-icon, or replace the whole button through the breakpoint-collapse-trigger slot. When the slot is not provided, the default wje-button is rendered.

<wje-breadcrumbs breakpoint="lg" breakpoint-collapse="menu" breakpoint-collapse-icon="menu-2">
  <wje-breadcrumb href="/home" title="Home" aria-label="Home"><wje-icon slot="start" name="home"></wje-icon></wje-breadcrumb>
  <wje-breadcrumb href="/photography">Photography</wje-breadcrumb>
</wje-breadcrumbs>

<wje-breadcrumbs breakpoint="lg" breakpoint-collapse="menu">
  <wje-button slot="breakpoint-collapse-trigger" fill="outline" label="Breadcrumb menu">
    <wje-icon name="menu-2"></wje-icon>
  </wje-button>

  <wje-breadcrumb href="/home" title="Home" aria-label="Home"><wje-icon slot="start" name="home"></wje-icon></wje-breadcrumb>
  <wje-breadcrumb href="/photography">Photography</wje-breadcrumb>
</wje-breadcrumbs>

Number of items before or after packing

When items are collapsed, the number of items to be displayed can be controlled by adding the itemsBeforeCollapse and itemsAfterCollapse properties.

Drop-down window

Collapsed items can also be displayed as a dropdown using the collapsed-variant property with the value dropdown.

Unpacking by clicking

If you don't want a drop-down menu, the default button option will show hidden items directly in the trail when you click on the collapse indicator.

Editing styles

Colour variants

Breadcrumb colors are modified via CSS variables on wje-breadcrumb, so you can also prepare your own meaning variants for specific trails.

CSS custom variables

If you need to fine-tune the default look, edit the CSS variables for the text and hover state of individual breadcrumb items.

When to use

Use wje-breadcrumbs 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 item terminology 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é	-

ariaLabelledby

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

breakpoint

Popis	Nastavuje textovú hodnotu uloženú vo voľbe breakpoint.
Atribút	breakpoint
Typ	string
Predvolené	-

breakpointCollapse

Popis	Nastavuje textovú hodnotu uloženú vo voľbe breakpoint-collapse.
Atribút	breakpoint-collapse
Typ	string
Predvolené	-

breakpointCollapseIcon

Popis	Nastavuje textovú hodnotu uloženú vo voľbe breakpoint-collapse-icon.
Atribút	breakpoint-collapse-icon
Typ	string
Predvolené	-

collapsedVariant

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

itemsAfterCollapse

Popis	Nastavuje číselnú hodnotu používanú vo voľbe items-after-collapse.
Atribút	items-after-collapse
Typ	number
Predvolené	1

itemsBeforeCollapse

Popis	Nastavuje číselnú hodnotu používanú vo voľbe items-before-collapse.
Atribút	items-before-collapse
Typ	number
Predvolené	1

maxItems

Popis	Nastavuje číselnú hodnotu používanú vo voľbe max-items.
Atribút	max-items
Typ	number
Predvolené	-

variant

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

Events

Názov	Popis
wje-breadcrumbs:item-click	Vyvolá sa pri odoslaní udalosti wje-breadcrumbs:item-click.

Methods

upgradeProperty

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

normalizeItems

Popis	Spustí metódu normalizeItems na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: Array｜string｜null｜undefined) => Array<object>

normalizeItem

Popis	Spustí metódu normalizeItem na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(item: object｜string｜number, index: number, usedKeys: Set<string>) => object

getItemKey

Popis	Vráti položku key z aktuálneho stavu komponentu.
Signatúra	(item: object, index: number, usedKeys: Set<string>) => string

syncItems

Popis	Synchronizuje položky s externým alebo interným zdrojom stavu.
Signatúra	(records: Array<object>) => void

createItemElement

Popis	Vytvorí položku element a pripojí ho do štruktúry komponentu.
Signatúra	(record: object, index: number) => HTMLElement

updateItemElement

Popis	Aktualizuje položku element podľa najnovších údajov komponentu.
Signatúra	(breadcrumb: HTMLElement, record: object, index: number) => void

syncItemAttribute

Popis	Synchronizuje položku attribute s externým alebo interným zdrojom stavu.
Signatúra	(element: HTMLElement, name: string, value: string｜null｜undefined) => void

syncBooleanItemAttribute

Popis	Synchronizuje boolean položku attribute s externým alebo interným zdrojom stavu.
Signatúra	(element: HTMLElement, name: string, isEnabled: boolean) => void

syncItemContent

Popis	Synchronizuje položku content s externým alebo interným zdrojom stavu.
Signatúra	(breadcrumb: HTMLElement, record: object) => void

getItemStructureSignature

Popis	Vráti položku structure signature z aktuálneho stavu komponentu.
Signatúra	(record: object) => string

dispatchManagedItemClick

Popis	Vyvolá vlastnú udalosť z kontextu komponentu.
Signatúra	(e: MouseEvent) => void

getManagedBreadcrumbFromEvent

Popis	Vráti managed breadcrumb from udalosť z aktuálneho stavu komponentu.
Signatúra	(e: Event) => HTMLElement｜null

updateCollapse

Popis	Aktualizuje collapse podľa najnovších údajov komponentu.
Signatúra	() => void

applyMenuCollapse

Popis	Spustí metódu applyMenuCollapse na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(breadcrumbs: Array<Element>) => void

isBreakpointMenuCollapseActive

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

usesMobileCollapsedVariant

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

resetCollapseState

Popis	Obnoví collapse state na počiatočné hodnoty.
Signatúra	(breadcrumbs: Array<Element>) => void

syncManagedAttribute

Popis	Synchronizuje managed attribute s externým alebo interným zdrojom stavu.
Signatúra	(element: Element, name: string, isEnabled: boolean) => void

refreshCollapsedIndicators

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

shouldApplyBreakpointCollapse

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

getBreakpointWidth

Popis	Vráti breakpoint width z aktuálneho stavu komponentu.
Signatúra	() => number｜null

getBreakpointCollapseTrigger

Popis	Vráti breakpoint collapse trigger z aktuálneho stavu komponentu.
Signatúra	() => Element｜null

getBreadcrumbs

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

getManagedBreadcrumbs

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

getBreadcrumbsCollapsed

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

CSS shadow parts

Názov	Popis
container	Štýluje kontajnerovú shadow časť.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
breakpoint-collapse-trigger	Slot pre vlastný obsah breakpoint-collapse-trigger v komponente.