How to create Custom Navigation Using Sling Models

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.

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