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​
separatorStyle​
Slots​
default​
Events​
item-click​
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.