Navigation: Breadcrumbs
Use breadcrumbs to offer visual navigation cues to the user, and provide the ability to easily understand the relationship between the current page and higher-level pages.
Quick Summary
Creating Breadcrumbs: Use an unordered list element with list items for each page
in the breadcrumbs element. All previous pages should be a link, and the current page should be
static text. Nest the breadcrumbs element inside a div for styling and layout.
Positive Breadcrumb Styles: When creating a breadcrumbs element on a light
background, use Charcoal for list items, and Deep Green for links. Set the links font colour to
change to Charcoal when hovered.
View on Codepen.
Negative Breadcrumb Styles: When creating a breadcrumbs element on a dark
background, use Cream for list items, and Light Blue for links. Set the links font colour to change
to Cream when hovered. View on Codepen.
Creating Breadcrumbs
To create a breadcrumbs element, use HTML and CSS. The HTML structure involves an unordered list element with a list item for each page in the breadcrumb. Styles are then applied in CSS using custom classes. Some rules apply to all types of breadcrumbs, and others are to be used considering constrast with the breadcrumb element's background.
Breadcrumbs Variations
Breadcrumbs: Positive
To be used against a light background. View on Codepen
Breadcrumbs: Negative
To be used against a dark background. View on Codepen