Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
#AEM #Sightly #SSJS Server Side JavaScript Use-API Breadcrumbs

###Description Retrieve a Page Object from all pages which are in the Site root then build a breadcrumb component and display the current pages title in a submenu.

###Use case Display a bar under eg a menu which displays the current pages title and functional breadcrumb components o the right.


  • Responsive and which works on all mobile devices and desktop.
  • Current pages title on the left
  • Breadcrumbs on the right
    • Separated by >
    • Previous pages are clickable

Using Bootstrap and some Business logic in here but can easily be transformed as needed. Page.html included as a sample of implementing this component.

<div class="breadcrumbsContainer" data-sly-use.jsutils="breadcrumbs.js">
<div class="col-xxs col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="pull-left">
<div class="col-xxs col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
<ul class="pull-right" data-sly-list="${jsutils.crumbs}">
<li"${currentPage.title == item.title}" class="active">${ || item.title}</li>
<li data-sly-test="${!active && item.title}"><a href="${item.path}.html">${ || item.title}</a></li>
"/libs/sightly/js/3rd-party/q.js"], function (ResourceUtils, Q) {
* Returns a Breadcrumb to allow user to navigate backwards to homepage
* Author: Eric Soukenka
* Date: 24May2015
/* Returns the path to homepage eg: /content/my-site/en.
* Typicall getAbsoluteParent however my site's have varying depths
function getHomePagePath() {
var homepathPromise = Q.defer();
.then(function (pageResource) {
ResourceUtils.getInheritedPageProperty(pageResource, 'redirectTarget')
.then(function (homepath) {
.fail(function (error) {
homepathPromise.reject(new Error("Failure determining homepath"));
return homepathPromise.promise
var crumbsPromise = Q.defer();
.then(function (homepath) {
var crumbs = [];
var childs = currentPage.path.replace(homepath, '');
crumbs[0] = pageManager.getPage(homepath)
childs.split('/').forEach(function (entry) {
if(entry.length()>0) crumbs[crumbs.length] = pageManager.getPage(homepath+'/'+entry)
return {
crumbs: crumbsPromise.promise
<div class="row breadcrumbs">
<div data-sly-resource="${ @path='breadcrumbs', resourceType='my-site/components/breadcrumbs'}"></div>
<!-- /.row -->

This comment has been minimized.

Copy link

Dhanusha0401 commented Sep 7, 2015

How do I get output for this? When I am executing by creating a design's not working


This comment has been minimized.

Copy link

rajeshkarka commented Oct 15, 2015

It's displaying only 2 levels of pages but what if I want to maintain some levels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.