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

How to create Custom Navigation Using Sling Models

Avatar

Level 2

This is my Site Structure i want a Custom navigation component Using Java  i want a dropdown or something else which navigates pages and the navigation bar should Show the cities. pls help me. 

 

 

Project:Restaurant 

 

 

 

3b84d2bf-5565-4a73-96a9-8cffeb71a93b.jpg

1 Accepted Solution

Avatar

Correct answer by
Level 8

Hi,

 

The above requirement is do-able. Over here you can create your custom component by overlaying the existing core component as shown in the example of we-retail.

 

After this based on your requirement you can modify the html file in your overlayed component which will call your "custom sling model" and use the same dialog as shown below.

 

shaileshbassi_1-1655473870546.png

 

Otherwise, you can even create a project specific navigation component as well, if required.

 

From your sling model you can return a Map<String,List<NavigationBean>> and render this navigation bean.

NavigationBean

  • private String linkTitle
  • private String linkUrl

Based on the selection in the dropdown i.e. you can populate the list and render it on the page. For rendering of the map in sightly:

HTL-code:

 

HTL-code:

<div data-sly-use.hashmap="com.adobe.examples.htl.core.hashmap.HashMapExample"

     data-sly-list="${hashmap.map.keySet.iterator}">

     ${item}

     <ul data-sly-list.aem="${hashmap.map[item].keySet.iterator}">

         <li>${aem} ${hashmap.map[item][aem]}</li>

     </ul>

</div>

 

 

Thanks

 

 

 

 

 

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 8

Hi,

 

The above requirement is do-able. Over here you can create your custom component by overlaying the existing core component as shown in the example of we-retail.

 

After this based on your requirement you can modify the html file in your overlayed component which will call your "custom sling model" and use the same dialog as shown below.

 

shaileshbassi_1-1655473870546.png

 

Otherwise, you can even create a project specific navigation component as well, if required.

 

From your sling model you can return a Map<String,List<NavigationBean>> and render this navigation bean.

NavigationBean

  • private String linkTitle
  • private String linkUrl

Based on the selection in the dropdown i.e. you can populate the list and render it on the page. For rendering of the map in sightly:

HTL-code:

 

HTL-code:

<div data-sly-use.hashmap="com.adobe.examples.htl.core.hashmap.HashMapExample"

     data-sly-list="${hashmap.map.keySet.iterator}">

     ${item}

     <ul data-sly-list.aem="${hashmap.map[item].keySet.iterator}">

         <li>${aem} ${hashmap.map[item][aem]}</li>

     </ul>

</div>

 

 

Thanks

 

 

 

 

 

 

Avatar

Community Advisor

Hi @HariDo ,

Recommended to refer AEM Core Navigation component - speed up development time and reduce maintenance cost , You can extend, apply Sling Model Delegation approach, to save your increased efforts, since it does have almost similar feature as per your requirement.

Reference: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/navigati...

Hope that helps you!

Regards,

Santosh