Breadcrumb

Usage

A breadcrumb is used to make the user aware of their current location within the hierarchical structure of an application. Each breadcrumb item contains a divider to show the relationship between sections.

Breadcrumbs should not replace the global navigation bar or the local navigation within a section. They should always show a single pathway in the application’s hierarchy.

Behaviour

• Breadcrumbs are represented as a trail of links where the current page is non-interactive, and the parent pages behave as links

• Clicking any of the parent page links takes the user to that page

Best Practices

• The content of each breadcrumb link should be the title of the page to which it links

• In the breadcrumb trail, the breadcrumb corresponding to the current page should never be a link

• When used on mobile, consider showing just one last level; breadcrumbs should never span through more than one row on mobile

• An overflow of three dots can be used if breadcrumb flows over the page, mainly used in mobile view

States

Breadcrumb states have similar visual cues to the link component

• Text is 12px Open Sans Regular

  • Enabled colour is Blue,

  • Hover colour is Blue D30,

  • Selected colour is Grey Base

  • Disabled colour is Grey L40

• Arrow icon colour is Grey L40

• Focus border is Purple L50