UI Elements Action Breadcrumb

Updated: December 19, 2016
SAPUI5 Version 1.38

Breadcrumb

sap.m.Breadcrumb

Intro

A breadcrumb (or breadcrumb trail) is a type of secondary navigation that indicates the position of a page in its application hierarchy, specifically in a drilldown scenario of object pages, tables, and charts.

Usage

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.

Use a breadcrumb only in drilldown scenarios to related object pages, such as: Parent object page/Child object page 1/Child object page 2/Child object page 3.

Do not use a breadcrumb if:

  • You only have one level in your hierarchy.

Other instances:

  • Do not include other floorplans like overview pages and list reports in the breadcrumb path.
  • Do not include cross-application navigation to other object pages in the breadcrumb path.
  • Do not include standalone object pages like fact sheets in the breadcrumb path.

The above cases are covered in the global navigation concept for SAP Fiori 2.O.

Responsiveness

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

  • 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.
  • The last element should never collapse into the dropdown.
  • If there is insufficient horizontal space for the last element in the breadcrumb, text is truncated to fit the available screen real estate.
Breadcrumb – Size L
Breadcrumb – Size L
Breadcrumb – Size M
Breadcrumb – Size M
Breadcrumb – Size S
Breadcrumb – Size S
Breadcrumb – Size S (dropdown menu selected)
Breadcrumb – Size S (dropdown menu selected)

Layout

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

Types

There are two types of breadcrumbs:

  1. Standard breadcrumb.
    The standard breadcrumb shows the current page as the last item in the trail. This is the only item that is not a link, but plain text.
  2. Breadcrumb without the current page. Use this breadcrumb only on the object page.
    The breadcrumb shows the page’s position in the site hierarchy without the current page. All items in the breadcrumb are links.
Standard breadcrumb
Standard breadcrumb
Breadcrumb without the current page
Breadcrumb without the current page

Components

The breadcrumb can contain links and text or just links, depending on the type.

Behavior and Interaction

Navigation

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

Styles

For information about the various styles of links, see the article on links.

Guidelines

  • In the dropdown menu on desktops and tablets, 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.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation