A breadcrumb is a type of secondary navigation that indicates the position of a page in its application hierarchy. It enables users to navigate between items by providing a list of links to previous steps in the user’s navigation path.

Basic breadcrumb

When to Use

Use the breadcrumbs component:

• To show secondary navigation on an object page.
• To show navigation in a table.
• To show navigation in charts.

Don’t use the breadcrumbs component:

• If your hierarchy contains only one level.
• To navigate to pages that are not part of the application hierarchy (for example, navigation to an object page in another application).

Anatomy

1. Parent page: The first link in the breadcrumb (the point of origin).
2. Child pages
3. Current page: The page the user is looking at.
4. Dropdown
5. First link in the hierarchy 

Variants

Without Current Page

You can opt to show the breadcrumb without the current page. By default, the breadcrumb shows the current page.

Breadcrumb without the current page

Separator Style

You can set the separator style. The the following options are available:

• Slash (default)
• Backslash
• Double slash
• Double backslash
• Greater than
• Double greater than

Examples of different breadcrumb separators

Behavior and Interaction

To navigate to a previous page, the user clicks the respective link in the trail.

Responsive Behavior

Breadcrumbs are responsive. If there is insufficient horizontal space, the links in the breadcrumb trail collapse into a dropdown menu:

• The first link in the breadcrumb (the point of origin) collapses first, followed by the next link in the hierarchy.
• The last element in the breadcrumb is always visible and doesn’t collapse into the dropdown menu.
• If there isn’t enough horizontal space, the last element is truncated.

Related Links