Breadcrumbs
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.
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.
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
breakpoint
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe breakpoint. |
| Atribút | breakpoint |
| 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
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
updateCollapse
| Popis | Aktualizuje collapse podľa najnovších údajov komponentu. |
| Signatúra | () => void |
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 |
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 |
getBreadcrumbs
| Popis | Vráti 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. |