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

collapsed

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

last

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

showCollapsedIndicator

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

Events

No events available for this component.

Methods

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.