Breadcrumbs

Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path. It helps the user to be aware of their location within the application and allows faster navigation.

The last three steps can be accessed as links directly, while the remaining links prior to them are available in a drop-down menu.

You can choose the type of separator to be used from a number of predefined options.

Keyboard Handling

The ui5-breadcrumbs provides advanced keyboard handling.

• [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.
• [Space],[Enter] - Activates the focused item and triggers the item-click event.
• [Escape] - Closes the drop-down.
• [Left] - If the drop-down is closed - navigates one item to the left.
• [Right] - If the drop-down is closed - navigates one item to the right.
• [Up] - If the drop-down is open - moves focus to the next item.
• [Down] - If the drop-down is open - moves focus to the previous item.
• [Home] - Navigates to the first item.
• [End] - Navigates to the last item.

Basic Sample

Properties

design

Description	Defines the visual appearance of the last BreadcrumbsItem. The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem: - "Standard" - displaying the last item as "current page" (bold and without separator) - "NoCurrentPage" - displaying the last item as a regular BreadcrumbsItem, followed by separator
Type	"Standard" | "NoCurrentPage"
Default	"Standard"

separatorStyle

Description	Determines the visual style of the separator between the breadcrumb items.
Type	"Slash" | "BackSlash" | "DoubleBackSlash" | "DoubleGreaterThan" | "DoubleSlash" | "GreaterThan"
Default	"Slash"

Slots

default

Description	Defines the component items. Note: Use the ui5-breadcrumbs-item component to define the desired items.
Type	Array<BreadcrumbsItem>

Events

item-click

Description	Fires when a BreadcrumbsItem is clicked. Note: You can prevent browser location change by calling event.preventDefault().
Type	CustomEvent<BreadcrumbsItemClickEventDetail>
Parameters	item: HTMLElement The clicked item. altKey: Boolean Returns whether the "ALT" key was pressed when the event was triggered. ctrlKey: Boolean Returns whether the "CTRL" key was pressed when the event was triggered. metaKey: Boolean Returns whether the "META" key was pressed when the event was triggered. shiftKey: Boolean Returns whether the "SHIFT" key was pressed when the event was triggered.

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

Overflow

When the links don't fit the available space, they overflow.

Separator Styles

Separator between the links can be easily changed.

Current Page Appearance

The Breadcrumbs supports two visual appearances for the last BreadcrumbsItem - as "current page" (bold and without separator) and as a regular link, followed by separator.