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, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down.
[SPACE, ENTER] - Activates the focused item and triggers the item-click event.
[ESC] - 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.
Properties/Attributes
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Name
Type
Default Value
Description
design
BreadcrumbsDesign
"Standard"
Defines the visual indication and behavior of the breadcrumbs. Available options are Standard (by default) and NoCurrentPage.
Note: The Standard breadcrumbs show the current page as the last item in the trail. The last item contains only plain text and is not a link.
separatorStyle
separator-style
BreadcrumbsSeparatorStyle
"Slash"
Determines the visual style of the separator between the breadcrumb items.
Available options are:
Slash
BackSlash
DoubleBackSlash
DoubleGreaterThan
DoubleSlash
GreaterThan
Slots
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.
Slot
Type
Description
default
HTMLElement [0..n]
Defines the component items.
Note: Use the ui5-breadcrumbs-item component to define the desired items.
Events
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
Name
Description
item-click
Fires when a BreadcrumbsItem is clicked. Note: You can prevent browser location change by calling event.preventDefault().
item
type: HTMLElement description: The clicked item.
altKey
type: Boolean description: Returns whether the "ALT" key was pressed when the event was triggered.
ctrlKey
type: Boolean description: Returns whether the "CTRL" key was pressed when the event was triggered.
metaKey
type: Boolean description: Returns whether the "META" key was pressed when the event was triggered.
shiftKey
type: Boolean description: Returns whether the "SHIFT" key was pressed when the event was triggered.
BreadcrumbsItem
Overview
The ui5-breadcrumbs-item component defines the content of an item in ui5-breadcrumbs.
Properties/Attributes
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Name
Type
Default Value
Description
accessibleName
accessible-name
string
undefined
Defines the accessible ARIA name of the item.
href
string
""
Defines the link href.
Note: Standard hyperlink behavior is supported.
target
string
undefined
Defines the link target.
Available options are:
_self
_top
_blank
_parent
_search
Note: This property must only be used when the href property is set.
Slots
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.
Slot
Type
Description
default
Node [0..n]
Defines the text of the component.
Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Theme:Morning Horizon (Light)Evening Horizon (Dark)Horizon High Contrast BlackHorizon High Contrast WhiteQuartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast White
