Breadcrumb

PATTERN OVERVIEW

A location-based breadcrumb trail is displayed below the header area to reveal the user's location within the site's directory (how folders and pages are organized in AEM). The breadcrumb does not appear on mobile devices.

Guidelines

• The default color for a breadcrumb is blue (#006ca2). The color can be changed per page if it is not legible over a banner or a dark background color, by selecting a new color. Pick the color that is the most legible. Be aware that child pages will inherit this new color unless it is overridden. 
• The label used for the breadcrumb should align with the H1 page title. Truncate the page title when necessary to avoid too many words. Avoid more than firve words to avoid wrapping issues.
• A breadcrumb should not appear on a home page of a site.
   

SPECIFICATIONS

Recommended word counts: No longer than five words. 

Type style: Heading use sentence case, no punctuation. 

AEM component: Use the "Breadcrumbs" component (automatically appears on the top of a page) to configure.

Editing options:

• All breadcrumb authoring options are individually inheritable. Meaning, if you overwrite one inherited value (such as Breadcrumb Color) the other two (Root URL and Site Root Path) will still be inherited from the parent. 
• The breadcrumb color, Root URL and Site Root Path settings are configured using the "Breadcrumb" component that appears on the top of each page.
• The Root URL value is what determines the link that will be added to the "Home" option in the Breadcrumb.
  
• The Root URL also determines the oringin point of the breadcrumb.  No parent page to the Root URL will display in the Breadcrumb.
• The Site Root Path will generally only be authored on the home page of a domain. 
• The Site Root Path would only need to overwritten on a child page if the domain of the links in an instance of the Breadcrumb is different than that of its parent site. 
•  The "Navigation Title" can be authored in the "basic" tab of the page properties in AEM. 
• The breadcrumb's home page can be manually reconfigured and assigned to a page other than the true home page of the site when necessary by changing the Root URL in the Breadcrumb editor.
• The breadcrumb can be turned off when it is not necessary by setting the Root URL in the Breadcrumb editor to match the current page URL.
• The "Navigaiton Title" can be authored in the "basic" tab of the page properties.