Get Navigation Child pages on hover

[Heena91]

Hi Team,

I have created navigation component using AEM core components. Please suggest how I can fetch the child pages of navigation on Hover.

Thanks!

[Asutosh_Jena_ · Accepted solution]

Hi @Heena91 

The OOTB core navigation component will list out all the pages including the child pages. Using CSS and JS you can hide the child pages by default and on hover you can show it.

Please see https://www.vyvansepro.com/adhd/adult-adhd site where we have implemented the core navigation component without any modification.

Thanks!

[Heena91]

Hi @Asutosh_Jena_

In my case only navigation items are showing, sub pages are not appearing.

HTL:

<div class="cmp-navigation--header" id="header-navbar"
data-sly-resource="${'navigation' @ resourceType='wknd/components/structure/navigation'}">
</div>

Thanks!

[Asutosh_Jena_]

I can see the dropdowns on each element which shows that you have the child items for each element but it's not shown. Can you inspect the element and see if the content is loading but it;s not visible on UI. In that case you need to work with frontend team to enable those elements if it's already available on DOM.

[Heena91]

Hi @Asutosh_Jena_

I checked the console it not getting child page.

Thanks!

[Asutosh_Jena_]

@Heena91 What is level option you have selected in dialog?

Please see the configuration here:

https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/...

[Heena91]

Hi @Asutosh_Jena_

Yes, I found the depth option, it was set to 1. Now, I changed it to 2 and able to see the child pages.

Now, will try to hide this and show this on hover using CSS/JS as suggested by you.

Thanks!!

[Asutosh_Jena_]

Sounds good!