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

Do

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

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).

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

Anatomy of a breadcrumb

Anatomy of a breadcrumb - dropdown

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

Breadcrumb without the current page

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