Breadcrumbs

Introduction

Breadcrumbs are a wayfinding tool that helps users understand where they are in the architecture of a site and provides them a way to quickly traverse the section they are in.

When to use

Breadcrumbs should be present on all pages except for the homepage for consistency. The current/active page does not need to be a link but should be plain text and visible to the user as an indicator of what page they are currently on. The other pages in the breadcrumb trail should be linked. In Sitecore, there is a Navigation field for the breadcrumb title.

Component properties:

There are no specific component properties at this time.

Frame(s):

This is a full width component and therefore is not placed within any frame.

Sitecore field(s):

Browser title: (required)

  • Single text field
  • The title that shows on the tab of the internet browser

Meta description: (optional)

  • Single text field

Navigation title (in the Navigation section): (required)

  • Single text field
  • The title that shows on the actual breadcrumb
  • Make sure the “Show in Breadcrumb” box is marked

Additional information

Breadcrumbs get their page name from the Navigation section of the page(s) in Sitecore.

Screenshot of Navigation section

Image specs

No imagery is used on the breadcrumb component.

Spacing

This component has:

  • a max width of 1200px
  • font-size: 1.4rem
  • line-height: 1.4