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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAawFGdQMxsLJlD3veI%2FBreadcrumb.png?alt=media\&token=3831aa1d-adeb-493e-a4df-f9bd79c1e0b2)

### 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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAawIWDNkVd5rRdTOqL%2FBreadcrumb%20states.png?alt=media\&token=3f85f02b-a751-4a2c-a32f-2ddb9464d3eb)