Breadcrumbs are text links at the top of the page that locate the user within the navigation hierarchy.

For general information about the Breadcrumb Core Component, refer to AEM's Breadcrumb Component documentation.

Usage guidelines

Do not select the following options in the edit dialog:

  • Show hidden navigation items
  • Hide current page
  • Disable shadowing

Navigation level

Breadcrumbs should start with a top level navigation item, such as “Health Care Professionals”, “Patients”, “Product”, or “About”. This  usually means that the “Navigation Start Level” field in the edit dialog should be set to “3”.

If the breadcrumbs wrap too much, set the “Navigation Start Level” at a higher level to shorten the breadcrumb chain. Start the chain on the previous page. 

Heading 1

See Container component for more information on the Page Header style system.

Structurally, breadcrumbs should always be the first piece of content on the page followed immediately by the page’s heading 1. The heading 1 can appear in two places: directly after the breadcrumbs or in the Super Hero component.

If the heading 1 does appear within the hero, the heading 1 must be informative, meaning the text must be the equivalent of the page title. This text cannot be marketing content.

Top margin

Top and bottom margin is not editable for the breadcrumb, because the breadcrumb position should be consistent on all pages.