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