SharePoint Site Global Navigation Mega Menu

[Shawn Xiong]

Currently I'm trying to implement global navigation cross site collections ( SharePoint Online/2016 ), currently there are some planned approaches, just want to get some different ideas and options, with considering implementation, performance and maintenance

1. Using global navigation list/library at top level of site collection, and all the subsites, site collection retrieve the data from the navigation list using JSOM/REST API and build megamenu from client side.
2. Using term store to store the hierarchy, and using out of box Managed Navigation: Term Set to display mega menu.
3. Using term store to store the hierarchy, and using JSOM to retrieve the managed meta data and build megamenu from client side.
4. Using SharePoint search with custom scope to a specific SharePoint list/library, using search API to retrive the result and build megamenu from client side.

[#2]

for me option 3 looks best. but be aware you do not change the masterpage..

[#3 · Accepted solution]

Hi @Shawn Xiong. Maybe you can take a look at this sample on the PnP GitHub repository:

https://github.com/OfficeDev/PnP/tree/master/Components/Core.TaxonomyNavigationComponents

It corresponds to your 3rd option. Behind the scenes, this sample uses RequireJS and the JavaScript injection technique to build a top navigation bar. All navigation links are managed through a taxonomy term set and are retrieved via JSOM.

If you want, you have also an other solution using Webpack and the SharePoint "Script On Demand" loading technique (instead of RequireJS):

https://github.com/OfficeDev/PnP/tree/master/Solutions/Business.O365StarterIntranet

In this case you will need to create a custom master page to load the JS files.

Hope this help!

Franck.

[#4]

Hi @Franck Cornu,

Thanks for the reply, Core.TaxonomyNavigationComponents is closer to what I'm after, and the SOD looks closer too me.

Just one concern, by using managed metadata as datasource, will it incur any performance issue, surely I can implment javascript client site caching, anything we can do to get better performance from server/service side.

thanks,

Shawn

[#5]

Hi  @Shawn Xiong

Indeed, query the taxonomy service at every page load can be time consuming for sure (and not really usefull because links don't change every time). If you want an example showing how to build a cache system for the navigation, I've implemented one using a configuration list and the local storage capability of the browser.

More info here and here.

Franck.

[#6]

Thanks for the reply @Franck Cornu, it looks good too.
I probably go with Term Store as data repository, JSOM to retrieve the data, local storage with expiry date + custom js event to reset local storage in the browser.

[#7]

Hi Shawn,

Understand this is an old post. But I'm in a similar situation. Did you end up creating a custom master page or created the top nav using a JS injection method?

I'm very tempted to use a custom master page as my requirement is just for one publishing site collection. Appreciate your response. 

Thanks,

Kannan

[#8]

Hi @Kannan, you can take a look at the PnP Starter Intranet.

This class could be very useful for your case (see the getNavigationTaxonomyNodes nethod). You don't need to use the full solution.

Franck.

[#9]

Thanks @Franck Cornu. Taking a look at it now. :)

[#10]

If it's just for custom navigation, better not using custom master page.

So I ended up with two version of implementation:

1. Publising Site: Using custom master page, javascript ,css, JSOM access term stores.
2. Team Site: No custom master page, with custom actions, javascript , css, JSOM access term stores.

3. Using PnP-PowerShell for the deployment and provisioning.

As @Franck Cornu mentioned, TaxonomyModule.ts is where the magic happens.

[#11]

Thanks Shawn. We are working on the publishing site now, hence going ahead with a custom master page. For team site, will explore the injection as you mentioned. Thanks Guys.