Breadcrumb Component (v1) breadcrumb-component-v

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

Sample Component Output sample-component-output

The following is sample taken from We.Retail.

Screenshot screenshot

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

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

Edit Dialog 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.

Design Dialog 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.

Technical Details 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.