Forum Discussion
SharePoint Site Global Navigation Mega Menu
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
- 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.
- Using term store to store the hierarchy, and using out of box Managed Navigation: Term Set to display mega menu.
- Using term store to store the hierarchy, and using JSOM to retrieve the managed meta data and build megamenu from client side.
- 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.
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.
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.
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
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.
Franck.
