Breadcrumbs

v1.0.0-rc.15
@ui5/webcomponents
<ui5-breadcrumbs>

Standard Breadcrumbs

Root Page Parent Page Current Page
<ui5-breadcrumbs>
	<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
	

Breadcrumbs with no current page

Root Page Parent Page
<ui5-breadcrumbs design="NoCurrentPage">
	<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
	

Breadcrumbs with specific separator

Root Page Parent Page Current Page
Root Page Parent Page Current Page
Root Page Parent Page Current Page
Root Page Parent Page Current Page
Root Page Parent Page Current Page
Root Page Parent Page Current Page
<ui5-breadcrumbs separator-style="Slash">
	<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
<ui5-breadcrumbs separator-style="BackSlash">
	<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
<ui5-breadcrumbs separator-style="DoubleBackSlash">
	<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
<ui5-breadcrumbs separator-style="DoubleGreaterThan">
	<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
<ui5-breadcrumbs separator-style="DoubleSlash">
	<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
<ui5-breadcrumbs separator-style="GreaterThan">
	<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
	<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
	

Overview

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.
item
type: HTMLElement
description: The clicked item.

BreadcrumbsItem

Overview

The ui5-breadcrumbs-item component defines the content of an item in ui5-breadcumbs.

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: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel