Breadcrumb

shadow

Breadcrumb displays one segment of the navigation path in the application and is a descendant of the Breadcrumbs element. It can also display an icon.

Note

For more information on using Breadcrumbs, navigate to the Breadcrumbs element documentation.

When to use

Use wje-breadcrumb 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

showCollapsedIndicator

Description	Controls how show-collapsed-indicator behaves in the component.
Attribute	show-collapsed-indicator
Type	any
Default	-

collapsed

Description	Controls whether the component is collapsed.
Attribute	collapsed
Type	any
Default	-

last

Description	Controls how last behaves in the component.
Attribute	last
Type	any
Default	-

Events

No events available for this component.

Methods

drawCollapsedIndicator

Description	Renders the collapsed indicator based on the current collapsed variant. If the collapsed variant is 'DROPDOWN', it invokes the collapseDropdown method. Otherwise, it invokes the collapseButton method.
Signature	() => any

collapseDropdown

Description

Creates and returns a dropdown UI component for collapsed breadcrumbs. This method generates a dropdown element with a button trigger and a menu populated with items corresponding to the collapsed breadcrumbs. The dropdown is configured to handle specific interactions and ensure that events are appropriately managed to avoid propagation issues. Menu items are linked to their corresponding breadcrumbs, enabling the same functionality as clicking on the original breadcrumb.

Signature

() => HTMLElement

collapseButton

Description	Creates a button element that expands hidden breadcrumbs when clicked. The button is set with appropriate attributes and event listeners to handle the expanding of hidden breadcrumb elements. Clicking the button will remove the button itself, reveal hidden breadcrumbs, and stop the current event propagation.
Signature	() => HTMLButtonElement

getBreadcrumbs

Description	Retrieves the breadcrumb trail for the current element by returning its parent element.
Signature	() => Element

CSS Shadow Parts

Name	Description
native	The native wrapper of the breadcrumb component.
separator	The separator between breadcrumb items.

CSS Custom Properties

Name	Description
--wje-breadcrumb-a	The color of the breadcrumb text.
--wje-breadcrumb-a-hover	The color of the breadcrumb separator line.

Slots

Name	Description
default	The main content of the breadcrumb.
start	Slot for content at the start of the breadcrumb.
end	Slot for content at the end of the breadcrumb.
separator	Slot for a custom separator between breadcrumb items.