Navigation component not displaying menus in all pages

[alwinaugustin]

I have created a community website using AEM communities and now I need to use dynmaic navigation component which I have instead of the default navigation. I hve added the component as shown below:

<cq:include path="test" resourceType="mycomponents-core/components/dynamic-nav"/>

and in the dynamic-nav.jsp, I have :

<%@page import="com.mycompany.foundation.core.sitemap.NavBuilder"%>
<%@include file="/apps/mycomponents-core/global.jsp"%>
<%
new NavBuilder(pageContext);
request.setAttribute("maxwidth", properties.get("maxwidth", "1330"));
pageContext.setAttribute("sticky", (properties.get("makeSticky", "").equals("true")) ? "ctx-sticky" : "");
pageContext.setAttribute("style", properties.get("style", ""));
pageContext.setAttribute("i18n", i18n);
pageContext.setAttribute("i18nMore", i18n.get("More"));
%>

<div class="dynamic-nav <c:if test='${style ne "vertical" }'>${ sticky }</c:if> ${ style }">
<div class="dn-wrapper" style="max-width: ${ maxwidth }px">
<ul class="nav-level-1">
<c:forEach items="${navigation.navigation}" var="L1item">
<c:choose>
<c:when test="${L1item.parent}">

<c:set var="LI_classes">has-child</c:set>
<c:if test="${L1item.ancestorOfCurrentPage or L1item.currentPage}">
<c:set var="LI_classes">active has-child</c:set>
</c:if>
<li class="${LI_classes}"><a href="javascript&colon;void(0);">

basically, it looping through the items and creating corresponding <li>. when I open the component in edit mode,I need to give the rootPath and it will dynamically creates the menu. Now when I include this in /libs/social/console/components/basepage/basepage.jsp it is only showing the full navigation on the home page ( http://localhost:4502/content/my-community/en.html) and it is not showing anything in the other community pages. How can I make this menu to be visible in all the pages ? 

[partyush · Accepted solution]

Hi @alwinaugustin 

To make the navigation component visible on all pages in your AEM Communities website, you need to modify the rootPath parameter in the NavBuilder class to use the correct root path for each page. Here's one way to achieve this:

1. Create a new JSP script file (e.g., dynamic-nav-wrapper.jsp) in the /apps/mycomponents-core/components directory of your AEM project.

2. Copy the contents of the dynamic-nav.jsp file into the new file.

3. Modify the dynamic-nav-wrapper.jsp file as follows:

   1. Import the com.day.cq.wcm.api.Page class at the top of the file: <%@ page import="com.day.cq.wcm.api.Page" %>

   2. Get the current page using the Page class:

      <% Page currentPage = (Page)request.getAttribute("currentPage"); %>

   3. Get the root path for the current page using the getPageManager().getContainingPage() method:<% String rootPath = currentPage.getPageManager().getContainingPage(currentPage.getPath()).getPath(); %>
   4. Pass the rootPath variable to the NavBuilder constructor:<% new NavBuilder(pageContext, rootPath); %>
   5. Replace the existing <cq:include> tag with the following:<sly data-sly-include="/apps/mycomponents-core/components/dynamic-nav"/>
   6. Include the dynamic-nav-wrapper.jsp file in your base page template (e.g., /libs/social/console/components/basepage/basepage.jsp) instead of the default navigation component:<cq:include script="dynamic-nav-wrapper.jsp"/>

With these modifications, the NavBuilder class will use the correct root path for each page in your website, ensuring that the navigation component is displayed correctly on all pages.