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

Learn more

View all

Sign in to view all badges

SOLVED

Get Navigation Child pages on hover

Heena91
Level 3
Level 3

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
asutosh_jena
Correct answer by
Community Advisor
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
asutosh_jena
Correct answer by
Community Advisor
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

Heena91
Level 3
Level 3

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!

 

asutosh_jena
Community Advisor
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.
Heena91
Level 3
Level 3

Hi @asutosh_jena

 

I checked the console it not getting child page.

Heena91_0-1622642142723.png

 

Thanks!

 

Heena91
Level 3
Level 3

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