Search the component library


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.


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.


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.


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.


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