Breadcrumb in AEM 6 - aem

Question

I have a requirement to create breadcrumb in sightly. I have following code which is working fine in JSP. But i am struggling to convert the code to sightly because i am not getting the right methods in currentStyle object to get the "absParent" and others. Any help will be highly appreciated!!
<%# include file="/libs/foundation/global.jsp" %>
<%
final int startLevel = currentStyle.get("absParent", 3);
final int endLevel = currentPage.getDepth() - currentStyle.get("relParent", 0);
final int minItems = currentStyle.get("minItems", 2);
if (startLevel <= endLevel - minItems) {
%><section class="breadcrumbs"><%
for (int level = startLevel+1; level < endLevel; ++level) {
Page itemPage = currentPage.getAbsoluteParent(level);
if (itemPage == null || !itemPage.isValid() || itemPage.isHideInNav()) {
continue;
}
final String pagePath = itemPage.getPath() + ".html";
final String pageTitle = itemPage.getNavigationTitle();
String className = "breadcrumb-item-"+level;
if (level == startLevel) className += " breadcrumb-first";
if (level == endLevel-1) className += " breadcrumb-last";
pageContext.setAttribute("className", className);%>
<section class="breadcrumbs ">
<%= xssAPI.encodeForHTML(pageTitle) %>
</section>
<%} %>
</section><%
}
%>

Answer 1

To create breadcrumb you have to write a WCMuse class and include that in this component.
<div
data-sly-use.breadcrumb="${'com.mySite.components.BreadcrumbUse'}">
<!-- + Breadcrumb component + -->
<div class="breadcrumb component">
<div class="breadcrumb_nav_bar clearfix"
data-sly-test="${breadcrumb.navList}"
data-sly-list.element="${breadcrumb.navList}">
<p data-sly-test="${!elementList.last}">
<a href="${element.path}.html">${element.title ||
element.navigationTitle || element.name}</a>
</p>
<p data-sly-test="${elementList.last}">${element.title ||
element.navigationTitle || element.name}</p>
</div>
</div>
<!-- - Breadcrumb component - -->
</div>
Code Sample for WCMUse class:
Public class BreadcrumbUse extends WCMUse
{
private List<Page> navList = new ArrayList<Page>();
#Override
public void activate() throws Exception
{
setBreadCrumbItems();
}
private void setBreadCrumbItems()
{
long level = 4L;
long endLevel = 1L;
int currentLevel = getCurrentPage().getDepth();
while (level < currentLevel - endLevel)
{
Page trailPage = getCurrentPage().getAbsoluteParent((int) level);
if (trailPage == null)
{
break;
}
this.navList.add(trailPage);
level++;
}
}
public List<Page> getNavList()
{
return this.navList;
}
}

Answer 2

The below code will work for creating breadcrumbs in AEM6.2 using Javascript and HTL(previously sightly).It worked well for me..here we go
Javascript to be used in the server side script(it can also be created using java)
script.js
use(function () {
var title = currentPage.getTitle();
//To get the title of the current page
var level = currentPage.getDepth();
//To find the depth of the current page from the root
var cts = new Array();
// To store the traversed page (object) from the root
for(var i=1;i<level;i++)
{ // Here I used i=1 for mycase(i=0 will be /content)
var titl = currentPage.getAbsoluteParent(i);
//To get the absolute parent at each level from root
pageStack.push(titl);
//Stack to maintain the pages
}
return {
title: title,
pageStack:pageStack
};
});
Breadcrumbs.html
<sly data-sly-use.cpt="script.js">
<h1>${cpt.title}</h1>
<div data-sly-list="${cpt.pageStack}">
<span> ${item.title}/</span>
</div>
</div>
Thus we get the breadcrumbs ready for our presentation!!!