Breadcrumbs
Search the component library

Breadcrumbs

v1.0.0
Download UI Kit v2.1.0

Use breadcrumbs to help users keep track of their locations within a website.

Download UI Kit v2.1.0

Usage Guidelines

This component is a visual style guide only.

Usage

Breadcrumbs are used primarily to give users a secondary means of navigating a website. They provide a trail of links for the user to follow back to the starting or entry point. Typically, breadcrumbs display a hierarchy of the current page in relation to the website's structure.

Note: Images used on this page are scaled up to make them easier read, go to the redlines section below for specification.

Breadcrumbs trail ended with page title.

Rendering

Breadcrumbs With Page Title

A breadcrumbs trail is typically rendered as a trail of links. At the end of the trail, the page currently being viewed is displayed as a bold non-link font.

A greater-than sign (>) serves as hierarchy separator, as in the format of Parent page > Child page.

Breadcrumbs trail ended with page title.

Breadcrumbs With No Page Title

If page has a title, do not include the title in the breadcrumbs to avoid redundancy.

Breadcrumbs trail with parent level links.

Mobile or Single Level Directory

Provide a link back to previous page.

Breadcrumbs trail for mobile or single level directory.

Placement

Breadcrumbs are placed horizontally across the top of a web page, often below navigation or application header.

Examples of breadcrumbs trail placements for desktop and mobile screens. Note on mobile, the breadcrumb is a link back to previous level.

Redlines

Separator Iconbreadcrumb-18
Medium Gray
Padding-left 4px
Padding-right 4px
Back Iconchevron-back-sm-18
Medium Gray
Padding-left 4px
Padding-right 4px
Links TypographySmall UI Text
Digital Pearson Blue
Page Title TypographySmall Bold UI Text
Charcoal

Changelog

1.0.0

  • INITIAL VERSION