Best approach to design Header using XF and core Navigation Components

[VinayHegde]

Requirement is like this:

Have Site A, Site B, Site C and Site D. All sites are built using same parent editable template.

These sites share a Header of similar structure but the navigation of header is depend of site specific pages.

Have configured Core navigation component in XF and that XP is placed in template structure.

As the pages of these sites may differ and they share same template ,the core navigation logic would not work. what would be the best approach to get site specific navigation links ?

Approach 1 - Have separate templates for all sites 

Approach 2 - Remove the "navigationRoot" from core navigation component dialog and customize that logic to fetch root path of site using custom model and  "getAbsoluteParent" - by sling delegacy pattern .

What would be best or any other efficient methods ?

[bipinchandra92]

Hi @VinayHegde ,

Please refer: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/get-started/localiz...

Detailed explanation with examples are provided in the above link.

[Shubham_borole]

Hello @VinayHegde 

I prefer Option 1 to have separate templates. One of the reasons is, this is just one scenario where your navigation template needs a change in how a given component (navigation in this case) differs. However in future there might be requests coming from owners of sites A, B , C & D to view things differently, hence I lean towards different templates (We may explore overlay approach for all templates pointing to one and changing things on site level) 

We can utilize XF variations where all the variations will be same except the navigation component will be authored to different nav roots. Each site template can point to respective xf variation in the structure node.

Thanks

[BrianKasingli · Accepted solution]

Hi, I have created enterprise-scaled White Label websites in the past, and for each "BRAND", it's recommended that they have their own editable templates or you'll be over-engineering.

This allows each "BRAND" to maintain its own templates with its own user permissions. 

This approach worked really well for me. Another tip is to create experience fragment folders with names with the "BRAND". This will really support permissions as well.

[arunpatidar]

Hi,

Please go with context-aware-configuration for brand specific changes.

https://sling.apache.org/documentation/bundles/context-aware-configuration/context-aware-configurati... 

https://wcm.io/caconfig/editor/ 

Create a path field in context-aware-configuration and browse the XF for header and Footer at site root.

You can change this at any tree level within inside same site as well you can have another header/footer e.g. header without navigation for error pages.

[VinayHegde]

Hi @arunpatidar , Thanks for this solution. As of now I went with having multiple template approach. Reasons by @BrianKasingli and @Shubham_borole are completely agreeable considering future scenarios.

But this context-aware-configuration solution also seems interesting , will try it for learning purpose.

Thanks,

Vinay Hegde

[arunpatidar]

Hi @VinayHegde 
You must choose a solution that fits your business requirements and can be extended in future.

But when you try this in local for learning purpose consider my feedback -

I have used context-aware-configuration with 20+ sites and use only one template.

I creates another template only when different set of component are allowed for Authoring or page has different set of configurations like e.g. clientlibs.

I will avoid creating template just because content is different in template.

[VinayHegde]

Thanks @arunpatidar , this information is very insightful. I will definitely try this.