Breadcrumbs
Search the component library

Breadcrumbs

v1.0.1
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.

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

Placement

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.

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
An underline is added on hover.
Page title typographySmall Bold UI Text
Charcoal

Changelog

1.0.1

  • ADDED: underlined link style on hover

1.0.0

  • INITIAL VERSION