Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

Site specific to region should be highlighted in navigation when user is in region specific site

Avatar

Level 3

Site specific to region should be highlighted in navigation when user is in region specific site  

 

I have a Use case where the region specific site must me highlighted in NAVIGATION bar when i am in the specific region site anyone help me how can i achieve it.

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

 

As I could think of the possible solution for implementing this:

 

1. Create the nav component and take the input from the author about the root page (as in OOTB) and Region Site level.

2. Start iterating the pages in java class and the time you get the match in the site level with the page level, you can create a idenitfier.

e.g. save all these values in a List<LinkBean> or something alike.

3. In the sightly while rendering, check for the identifier from the sling model created in Step 2 and you can add your css there.

 

Thanks

View solution in original post

3 Replies

Avatar

Community Advisor

Hi @HariDo ,

I believe AEM core Navigation component should have that capability, please check here https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/navigati...

Otherwise, that could be achieved using JavaScript and CSS if it’s custom implemented components.

Kindly refer to the below links for more implementation details:

https://stackoverflow.com/questions/4626431/highlight-the-navigation-menu-for-the-current-page

https://m.youtube.com/watch?v=l9niaFJh8Gs

Hope that helps!

Regards,

Santosh

 

 

Avatar

Correct answer by
Community Advisor

Hi,

 

As I could think of the possible solution for implementing this:

 

1. Create the nav component and take the input from the author about the root page (as in OOTB) and Region Site level.

2. Start iterating the pages in java class and the time you get the match in the site level with the page level, you can create a idenitfier.

e.g. save all these values in a List<LinkBean> or something alike.

3. In the sightly while rendering, check for the identifier from the sling model created in Step 2 and you can add your css there.

 

Thanks