34. Creating Complex navigation component using javascript helper in AEM

Creating Complex navigation component using javascript helper in AEM(Javascript Use-Api): This video shows how to create a complex navigation component in AEM using javascript helper.

Navigation is a horizontal menu at the top of the page that provides links to navigate to a specific page in the site.

Having navigation feature is very common in the website, therefore creating navigation component is important task you can do as a aem developer.

Typicall, the top navigation is the same on all pages. But in simple navigation it was changing on every page and display no items when the pagge has no children.

We will use data-sly-use and data-sly-repeat attributes to build up it's logic. You can refer below url to find the code :

We are using Javascript Use-API in this video.

Use-API has some common variables available right off the bat.
currentNode
currentPage
resource
log
sling
pageProperties
properties
pageManager
component
designer
currentDesign
currentStyle

Using currentPage object we are calling getAbsoluteParent() method to build up our logic.

After doing it open the English page, navigation will appear there. Every page will show the same navigation items now even if the page has no children item.

share, support, like and subscribe

About : AEM/CQ5 tutorial is a youtube channel which helps you to learn AEM concepts theoretically as well as practically.

[prakashvenkatesh]

thanks a lot for video. Please upload more

[NileshChavan]

Hey Pankaj, I have a requirement that i have 5 pages A, B, C, D and E under my site and i need these pages to appear on the Nav bar. Now suppose the author wants to change the order of these pages to display it as A, D, B, C, E in Nav bar. How this can be done? I know it can be done using classic UI manual node movement (from sites.html). But we dont want author to perform this operation this way. We can't use number property approach as well as a change in position for one page, will result in change for all remaining 4 pages. That's not feasible if we have more pages under site. Any other programatic approach for this?

[visa]

Nice tutorials... what changes we need to do to display products child pages on clicking "products" page?

[Tina__ntt]

Why I can't use topnav instead of topnav.js
Why it's not the same as TopNav.java