Breadcrumb

Breadcrumb allows navigation of the page hierarchy relative to the current page. It is commonly added to a page template, in the header or footer.

Github URL
Adobe URL
Source URL
Title
Standard
Content

Simple breadcrumb with no configuration applied. Shows the current page in relation to the page hierarchy.

Result
Properties:
jcr:primaryType: nt:unstructured
jcr:createdBy: admin
startLevel: 2
jcr:lastModifiedBy: admin
jcr:created:
showHidden: false
jcr:lastModified:
hideCurrent: false
sling:resourceType: core-components-examples/components/breadcrumb
Markup:
<div class="breadcrumb">
  <nav id="breadcrumb-b2f8c70662" class="cmp-breadcrumb" aria-label="Breadcrumb" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb&quot;,&quot;repo:modifyDate&quot;:&quot;2019-05-21T07:21:29Z&quot;}}">
    <ol class="cmp-breadcrumb__list" itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <li class="cmp-breadcrumb__item" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662-item-9bee4d4454&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb/item&quot;,&quot;repo:modifyDate&quot;:&quot;2019-12-20T18:35:24Z&quot;,&quot;dc:title&quot;:&quot;Component Library&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library.html&quot;}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a href="/content/core-components-examples/library.html" class="cmp-breadcrumb__item-link" itemprop="item" data-cmp-clickable="">
          <span itemprop="name">Component Library</span>
        </a>
        <meta itemprop="position" content="1">
      </li>
      <li class="cmp-breadcrumb__item" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662-item-1d32a567a9&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb/item&quot;,&quot;dc:title&quot;:&quot;Templating&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating.html&quot;}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a href="/content/core-components-examples/library/templating.html" class="cmp-breadcrumb__item-link" itemprop="item" data-cmp-clickable="">
          <span itemprop="name">Templating</span>
        </a>
        <meta itemprop="position" content="2">
      </li>
      <li class="cmp-breadcrumb__item" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662-item-35671d6884&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb/item&quot;,&quot;dc:title&quot;:&quot;Breadcrumb&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/breadcrumb/hidden/level-1/level-2/breadcrumb.html&quot;}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a href="/content/core-components-examples/library/templating/breadcrumb/hidden/level-1/level-2/breadcrumb.html" class="cmp-breadcrumb__item-link" itemprop="item" data-cmp-clickable="">
          <span itemprop="name">Breadcrumb</span>
        </a>
        <meta itemprop="position" content="3">
      </li>
      <li class="cmp-breadcrumb__item" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662-item-eae3a9359d&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:29Z&quot;,&quot;dc:title&quot;:&quot;Level 1&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/breadcrumb/hidden/level-1.html&quot;}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a href="/content/core-components-examples/library/templating/breadcrumb/hidden/level-1.html" class="cmp-breadcrumb__item-link" itemprop="item" data-cmp-clickable="">
          <span itemprop="name">Level 1</span>
        </a>
        <meta itemprop="position" content="4">
      </li>
      <li class="cmp-breadcrumb__item" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662-item-4ece1d42cb&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:29Z&quot;,&quot;dc:title&quot;:&quot;Level 2&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/breadcrumb/hidden/level-1/level-2.html&quot;}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a href="/content/core-components-examples/library/templating/breadcrumb/hidden/level-1/level-2.html" class="cmp-breadcrumb__item-link" itemprop="item" data-cmp-clickable="">
          <span itemprop="name">Level 2</span>
        </a>
        <meta itemprop="position" content="5">
      </li>
      <li class="cmp-breadcrumb__item cmp-breadcrumb__item--active" data-cmp-data-layer="{&quot;breadcrumb-b2f8c70662-item-654f395665&quot;:{&quot;@type&quot;:&quot;core-components-examples/components/breadcrumb/item&quot;,&quot;repo:modifyDate&quot;:&quot;2020-01-16T15:15:29Z&quot;,&quot;dc:title&quot;:&quot;Breadcrumb&quot;,&quot;xdm:linkURL&quot;:&quot;/content/core-components-examples/library/templating/breadcrumb/hidden/level-1/level-2/breadcrumb.html&quot;}}" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <span itemprop="name">Breadcrumb</span>
        <meta itemprop="position" content="6">
      </li>
    </ol>
  </nav>
</div>
JSON:
{"id":"breadcrumb-b2f8c70662","items":[{"id":"breadcrumb-b2f8c70662-item-9bee4d4454","active":false,"url":"\/content\/core-components-examples\/library.html","title":"Component Library","dataLayer":{"breadcrumb-b2f8c70662-item-9bee4d4454":{"@type":"core-components-examples\/components\/breadcrumb\/item","repo:modifyDate":"2019-12-20T18:35:24Z","dc:title":"Component Library","xdm:linkURL":"\/content\/core-components-examples\/library.html"}},":type":"core-components-examples\/components\/page"},{"id":"breadcrumb-b2f8c70662-item-1d32a567a9","active":false,"url":"\/content\/core-components-examples\/library\/templating.html","title":"Templating","dataLayer":{"breadcrumb-b2f8c70662-item-1d32a567a9":{"@type":"core-components-examples\/components\/breadcrumb\/item","dc:title":"Templating","xdm:linkURL":"\/content\/core-components-examples\/library\/templating.html"}},":type":"foundation\/components\/redirect"},{"id":"breadcrumb-b2f8c70662-item-35671d6884","active":false,"url":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1\/level-2\/breadcrumb.html","title":"Breadcrumb","dataLayer":{"breadcrumb-b2f8c70662-item-35671d6884":{"@type":"core-components-examples\/components\/breadcrumb\/item","dc:title":"Breadcrumb","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1\/level-2\/breadcrumb.html"}},":type":"foundation\/components\/redirect"},{"id":"breadcrumb-b2f8c70662-item-eae3a9359d","active":false,"url":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1.html","title":"Level 1","dataLayer":{"breadcrumb-b2f8c70662-item-eae3a9359d":{"@type":"core-components-examples\/components\/breadcrumb\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"Level 1","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1.html"}},":type":"core-components-examples\/components\/page"},{"id":"breadcrumb-b2f8c70662-item-4ece1d42cb","active":false,"url":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1\/level-2.html","title":"Level 2","dataLayer":{"breadcrumb-b2f8c70662-item-4ece1d42cb":{"@type":"core-components-examples\/components\/breadcrumb\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"Level 2","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1\/level-2.html"}},":type":"core-components-examples\/components\/page"},{"id":"breadcrumb-b2f8c70662-item-654f395665","active":true,"url":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1\/level-2\/breadcrumb.html","title":"Breadcrumb","dataLayer":{"breadcrumb-b2f8c70662-item-654f395665":{"@type":"core-components-examples\/components\/breadcrumb\/item","repo:modifyDate":"2020-01-16T15:15:29Z","dc:title":"Breadcrumb","xdm:linkURL":"\/content\/core-components-examples\/library\/templating\/breadcrumb\/hidden\/level-1\/level-2\/breadcrumb.html"}},":type":"core-components-examples\/components\/page"}],":type":"core-components-examples\/components\/breadcrumb","dataLayer":{"breadcrumb-b2f8c70662":{"@type":"core-components-examples\/components\/breadcrumb","repo:modifyDate":"2019-05-21T07:21:29Z"}}}
PostCSS: CSS:

By mchavez

Hi, I am Michael Chavez, a web developer based in San Francisco, California. I started Space-Rocket in 2012 to make custom content management systems that are tailored to business needs.

Leave a comment

Your email address will not be published. Required fields are marked *