Breadcrumb

Breadcrumbs show where the user is within the navigation structure.

Breakdown

Each breadcrumb is a clickable link. The only exception being the last in the chain, which indicates where the user currently is in the journey.

Usage

Breadcrumb links allow users to navigate to previous pages within the journey. This is usually found within a Hero pattern.

Colour

The breadcrumb colour can be changed depending on the background colour it is against.

Anatomy

Horizontal gap

Breadcrumbs use a horizontal gap of 9px between each breadcrumb link and the forward slash that follows to make up the appropriately spaced breadcrumb trail.