Displaying Custom Page Properties with Navigation core component

[karthik2906]

Hi everyone.

I am using the navigation core component given by adobe to create my header and I have implemented it into my header component without making any changes. Now, I have added custom page properties and I want to display them using my navigation component. I cannot use the current page's page properties since I want to display all the level 0's page properties. 

I've tried extending the core navigation model but there's a lot of different models I will need to change. Is there any other way to achieve this or is extending the core model the only way?

Thank you!

[aanchal-sikka · Accepted solution]

Hello @karthik2906 

Please use Delegation instead of extending.

The explanation is available on following link: https://kiransg.com/2021/11/07/aem-core-component-delegation/

This will save you from copying a lot of files 

[karthik2906]

Thank you. I have done it in another way without extending for now but I will try delegation as well.

[Jagadeesh_Prakash]

@karthik2906  Try below Sightly html

<!-- Assuming "customTitle" is the name of your custom property -->
<li data-sly-repeat="${properties.navigationRoot.listChildren}">
<a href="${item.path}">${item.customTitle @ context='unsafe'}</a>
</li>

[kautuk_sahni]

@karthik2906 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.