Skip to main content

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​

DescriptionDefines 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​

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

Slots​

default​

DescriptionDefines the component items.
Note: Use the ui5-breadcrumbs-item component to define the desired items.
TypeArray<BreadcrumbsItem>

Events​

item-click​

DescriptionFires when a BreadcrumbsItem is clicked.
Note: You can prevent browser location change by calling event.preventDefault().
TypeCustomEvent<BreadcrumbsItemClickEventDetail>
Parametersitem: 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.