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
This example shows a simple breadcrumb trail with several levels so you can see how the navigation path is composed and where the active item sits.
Use with icons
This example adds icons directly to breadcrumb items. It is useful when sections should be distinguishable visually as well as by text.
Custom separator icon
This example replaces the default breadcrumb separator with a custom icon to better match the visual language of the rest of the interface.
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.
Expand on click
If you do not want a dropdown menu, the default button variant reveals the hidden items directly in the trail after clicking the collapsed indicator.
Styling
Color variants
Breadcrumb colors are adjusted through CSS variables on wje-breadcrumb, so you can prepare custom semantic variants for different trails.
CSS custom properties
When you need finer visual control, adjust the CSS variables that drive breadcrumb text and hover styling.
When to use
Use wje-breadcrumbs when users need to understand location, move between views, or traverse hierarchy.
When not to use
Do not combine multiple competing navigation patterns for the same user flow.
Accessibility
Ensure visible active/selected states, predictable tab order, and clear control naming.
Best Practices
- Keep URL state and UI navigation state synchronized.
- Use consistent labels across menu, breadcrumbs, and tabs.
- Add context for deep structures (breadcrumbs, headings, icon cues).
Attributes and Properties
itemsAfterCollapse
| Description | The number of breadcrumbs to show after the collapsed indicator. |
| Attribute | items-after-collapse |
| Type | number |
| Default | 1 |
itemsBeforeCollapse
| Description | The number of breadcrumbs to show before the collapsed indicator. |
| Attribute | items-before-collapse |
| Type | number |
| Default | 1 |
maxItems
| Description | The maximum number of visible breadcrumbs before collapsing. |
| Attribute | max-items |
| Type | number |
| Default | - |
variant
| Description | Sets ARIA metadata used to improve accessibility semantics for assistive technologies. |
| Attribute | variant |
| Type | string |
| Default | button |
Events
No events available for this component.
Methods
getBreadcrumbs
| Description | Retrieves all breadcrumb elements within the current instance. |
| Signature | () => Array<Element> |
getBreadcrumbsCollapsed
| Description | Retrieves all breadcrumb elements that have the 'collapsed' attribute. |
| Signature | () => Array<Element> |
CSS Shadow Parts
| Name | Description |
|---|---|
container | The component's container wrapper. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
default | The container for breadcrumb elements. |