Search the component library


Download UI Kit v2.1.0

Breadcrumbs help users keep track of their locations within a website. They are used primarily to give users a secondary means of navigating. Typically, breadcrumbs display a hierarchy of the current page in relation to the website's structure.

Note: There isn't a coded component associated with this design pattern.

Download UI Kit v2.1.0

Note: The images below are scaled up to make them easier read, see the Redlines section for specifications.


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

Breadcrumbs without page title

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

Breadcrumbs trail with parent level links.

Mobile or single-level directory

Provide a link back to the previous page.

Breadcrumbs trail for mobile or single level directory.


Place breadcrumbs horizontally across the top of a web page, often below the 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
An underline is added on hover.
Page title typographySmall Bold UI Text



  • ADDED: underlined link style on hover