Intro

A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy. It is typically used for drilldown scenarios where users navigate through related object pages, tables, and charts.

Breadcrumb

When to Use

Use a breadcrumb if:

You want to show secondary navigation on the object page.
You want to show navigation in a table.
You want to show navigation in charts.
You want to support a user flow that involves drilling down through multiple related object pages, such as:

Parent object page → Child page 1 → Child page 2 → Child page 3.

Don't

Don’t use a breadcrumb if:

Your hierarchy contains only one level.
You’re linking to other floorplans, such as overview pages or list reports.
You’re navigating across applications to unrelated object pages.
You’re linking to standalone object pages, such as fact sheets.

These cases are covered in the global navigation concept.

Anatomy

Parent page: The first link in the breadcrumb (the point of origin).
Child pages
Current page: The page the user is looking at.

Anatomy of a breadcrumb

Types

There are two types of breadcrumb.

The standard breadcrumb shows the current page as the last item in the trail. The last item contains only plain text and not a link.

Standard breadcrumb

Use this breadcrumb for the object page only. The breadcrumb shows the position of the object page in the application hierarchy, without the current page. All items in the breadcrumb are links.

Breadcrumb without the current page

Behavior and Interaction

The purpose of the breadcrumb is to trigger navigation. The action is triggered when the user clicks a link in the breadcrumb trail. For link behavior and interaction, see Link.

Responsiveness

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

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 should never collapse into the dropdown menu.
The last element is truncated if the horizontal space is insufficient.

The horizontal layout of the breadcrumb never changes. Links always appear next to each other.

Breadcrumb – full path

Breadcrumb – collapsed path

Breadcrumb – dropdown menu

guideline

In the dropdown menu on desktop and tablet devices, show only the links that are not visible in the breadcrumb trail.
In the dropdown menu on smartphones, show all the links in the breadcrumb trail in their hierarchical order.