Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Get Navigation Child pages on hover

Avatar

Level 4

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!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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!

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

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!

Avatar

Level 4

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>

 

Heena91_0-1622635794273.png

 

Heena91_1-1622635933202.png

 

Thanks!

 

Avatar

Community Advisor
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.

Avatar

Level 4

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!!