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.

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

Properties Tab

Breadcrumb component edit dialog

  • Navigation Start Level - Where in the hierarchy the breadcrumb component should start to walk down to the current page. For example:

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

Styles Tab

Styles tab of the edit dialog of Breadcrumb List Component

The Breadcrumb Component supports the AEM Style System..

Use the drop-down to select the styles that you want to apply to the component. Selections made in the edit dialog have the same effect as those chosen from the component toolbar.

Styles must be configured for this component in the design dialog in order for the drop down menu to be available.

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 the Show hidden navigation items option 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 the Hide current page option 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 the Disable shadowing option when the breadcrumb component is added to a page.