#AEM #Sightly #SSJS Server Side JavaScript Use-API Breadcrumbs

README.md

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

##Requirements

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

breadcrumbs.html

<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">
            <h1>${currentPage.title}</h1>
        </div>
    </div>
    <!--.col-->
    <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 data-sly-test.active="${currentPage.title == item.title}" class="active">${item.properties.navTitle || item.title}</li>
            <li data-sly-test="${!active && item.title}"><a href="${item.path}.html">${item.properties.navTitle || item.title}</a></li>
        </ul>
    </div>
    <!--.col-->
</div>

breadcrumbs.js

use(["/libs/wcm/foundation/components/utils/ResourceUtils.js",
     "/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();
        ResourceUtils.getContainingPage(granite.resource)
            .then(function (pageResource) {
                ResourceUtils.getInheritedPageProperty(pageResource, 'redirectTarget')
                    .then(function (homepath) {
                        homepathPromise.resolve(homepath);
                    })
                    .fail(function (error) {
                        homepathPromise.reject(new Error("Failure determining homepath"));
                    })
            })
        return homepathPromise.promise
    }

    var crumbsPromise = Q.defer();

    getHomePagePath()
        .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)
            });
            crumbsPromise.resolve(crumbs)
        })

    return {
        crumbs: crumbsPromise.promise
    };
});

page.html

<div class="row breadcrumbs">
    <div data-sly-resource="${ @path='breadcrumbs', resourceType='my-site/components/breadcrumbs'}"></div>
</div>
<!-- /.row -->

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