TOPICS×
Breadcrumb Component
The Core Component Breadcrumb Component is a navigation component that builds a breadcrumb of links based on the page's location in the content hierarchy.
Usage
The Breadcrumb Component displays the position of the current page within the site hierarchy, allowing page visitors to navigate the page hierarchy from their current location. This is often integrated into page headers or footers.
Available options, such as the default navigation level and the ability to show the current page or hidden pages, can be defined by the template author in the
design dialog
. The content editor can then choose if hidden pages should be shown or not and the actual navigation level for the component in the
edit dialog
.
Version and Compatibility
The current version of the Breadcrumb Component is v2, which was introduced with release 2.0.0 of the Core Components in January 2018, and is described in this document.
The following table details all supported versions of the component, the AEM versions with which the versions of the component is compatible, and links to documentation for previous versions.
Component Version
| AEM 6.3
| AEM 6.4
| AEM 6.5
| AEM as a Cloud Service
|
|---|---|---|---|---|
v2
| -
| Compatible
| Compatible
| Compatible
|
For more information about Core Component versions and releases, see the document
Core Components Versions
.
Sample Component Output
To experience the Breadcrumb Component as well as see examples of its configuration options as well as HTML and JSON output, visit the
Component Library
.
As of Core Components release 2.1.0, the Breadcrumb Component supports
schema.org microdata
.
Technical Details
The latest technical documentation about the Breadcrumb Component
can be found on GitHub
.
Further details about developing Core Components can be found in the
Core Components developer documentation
.
Edit Dialog
The edit dialog allows the content author to suppress hidden and active pages in the breadcrumbs as well as the depth in the hierarchy it should display.
- Navigation Start Level- Where in the hierarchy the breadcrumb component should start to walk down to the current page. For example in We.Retail:
- 0 starts at/content
- 1 starts at/content/<yourSite>
- 2 starts at/content/<yourSite>/<country>
- Show hidden navigation items- Show pages marked as hidden in the breadcrumb (by default they will not be displayed)
- Hide current page- Suppress the current page in the breadcrumb (by default it will be displayed)
- Disable shadowing- If the page in the hierarchy is a redirect, the name of the redirecting page will be shown instead of the target. See the Shadow Site Structure Support of the Navigation Component for more information.
- ID- This option allows to control the unique identifier of the component in the HTML and in the Data Layer .
- If left blank, a unique ID is automatically generated for you and can be found by inspecting the resulting page.
- If an ID is specified, it is the responsibility of the author to make sure that it is unique.
- Changing the ID can have an impact on CSS, JS and Data Layer tracking.
Design Dialog
The design dialog allows the template author to define what the default values are for the options to suppress hidden and active pages in the breadcrumbs as well as the depth in the hierarchy it should display.
Main Tab
- Navigation Start Level- Defines the default value for where in the hierarchy the breadcrumb component should start to walk down to the current page when the breadcrumb component is added to a page.
- Show hidden navigation items- Defines the default value of theShow hidden navigation itemsoption when the breadcrumb component is added to a page.
- It does not enable or disable the option for the author. It only sets the default value.
- Hide current page- Defines the default value of theHide current pageoption when the breadcrumb component is added to a page.
- It does not enable or disable the option for the author. It only sets the default value.
- Disable shadowing- Defines the default value of theDisable shadowingoption when the breadcrumb component is added to a page.
Styles Tab
The Breadcrumb Component supports the AEM
Style System
.