Breadcrumb Component (v1)

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

This document describes v1 of the Breadcrumb Component, originally introduced with release 1.0.0 of the Core Components with AEM 6.3.

The following table lists the compatibility of v1 of the Breadcrumb Component.

AEM Version Breadcrumb Component v1
6.3 Compatible
6.4 Compatible
CAUTION

This document describes v1 of the Breadcrumb Component.
For details of the current version of the Breadcrumb Component, see the Breadcrumb Component document.

Sample Component Output

The following is sample taken from We.Retail.

Screenshot

HTML

<div class="cmp cmp-breadcrumb aem-GridColumn aem-GridColumn--default--12">

<ol class="breadcrumb">
    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us.html">
            United States
        </a>
    </li>

    <li class="breadcrumb-item ">
        <a href="/content/we-retail/us/en.html">
            English
        </a>
    </li>

    <li class="breadcrumb-item active">
        
            Experience
        
    </li>
</ol>
 
</div>

JSON

"breadcrumb": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              ":type": "weretail/components/content/breadcrumb"
            }
NOTE

JSON export from the Core Components requires release 1.1.0 of the Core Components. Please see the compatibility information for Core Components v1 for more information.

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-Level to start - Where in the hierarchy the breadcrumb component should start to walk down to the current page. For example in We.Retail:

    • 1 starts at /content/we-retail
    • 2 starts at /content/we-retail/<country>
  • Show Hidden - Show pages marked as hidden in the breadcrumb (by default they will not be displayed)

  • Hide Current- Suppress the current page in the breadcrumb (by default it will be displayed)

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.

  • Navigation-Level to start - 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 - Defines the default value of the Show Hidden 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 - Defines the default value of the Hide Current 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.

Technical Details

The latest technical documentation about the Breadcrumb Component can be found on GitHub.

The entire core components project can be downloaded from GitHub.

Further details about developing Core Components can be found in the Core Components developer documentation.

On this page