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
Use with icons
Custom separator icon
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.
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
maxItems
| Description | The maximum number of visible breadcrumbs before collapsing. |
| Attribute | max-items |
| Type | number |
| Default | - |
itemsBeforeCollapse
| Description | The number of breadcrumbs to show before the collapsed indicator. |
| Attribute | items-before-collapse |
| Type | number |
| Default | - |
itemsAfterCollapse
| Description | The number of breadcrumbs to show after the collapsed indicator. |
| Attribute | items-after-collapse |
| Type | number |
| Default | - |
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. |