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.
When to Use
- Parent page: The first link in the breadcrumb (the point of origin).
- Child pages
- Current page: The page the user is looking at.
- First link in the hierarchy
Anatomy of a breadcrumb
Anatomy of a breadcrumb - dropdown
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
You can set the separator style. The the following options are available:
- Slash (default)
- 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.
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.