Breadcrumbs

Usage 

Breadcrumbs are used as a secondary navigation that indicates the position of a page in its application hierarchy. A breadcrumb should show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step. 

Do:

Use breadcrumbs as a secondary navigation in interfaces that have a lot of content with more than two levels of hierarchy.

Don’t :

• Use breadcrumbs as the main navigation. 
• Use breadcrumbs if the hierarchy contains only one level. 
• Use breadcrumbs to guide the user through a multistep process (instead us a progress indicator component)

Placement 

Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, and above the page title.   

Types 

Location-based breadcrumb

These illustrate the site’s hierarchy and show the user where they are within that hierarchy.   

Path-based breadcrumb 

These show the actual steps the user took to get to the current page, rather than reflecting the site’s information architecture. Path-based breadcrumbs are always dynamically generated.     

Anatomy and content 

Anatomy

1 – Icon

The home icon is an IconButton that directs the user towards the Homepage of the Product.  

2 – Separator

Separators are non-interactive icons that are placed between each page link to clearly distinguish them. 

3 – Text: page links

Page links directs users towards the appropriate page. The last link corresponds to the current page and should remain interactive.  

Breadcrumbs variants 

Icon 

Icon + Text 

Text only

Behaviour and interaction 

Text links behaviour should be the same as the standalone link component.  Separators are not interactive. 

Limited space 

When space becomes limited, use an ellipsis IconButton and a menu to truncate the breadcrumbs. The first and last two page links should be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line. 

Responsiveness and density 

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