Forum Discussion
SharePoint Site Global Navigation Mega Menu
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, https://github.com/OfficeDev/PnP/tree/master/Components/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.
More info https://github.com/OfficeDev/PnP/blob/master/Solutions/Business.O365StarterIntranet/App/src/viewmodels/topnav.viewmodel.tsand http://thecollaborationcorner.com/2016/08/31/part-4-the-navigation-implementation.
Franck.
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.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
Hi Kannan, you can take a look at the https://github.com/SharePoint/PnP/tree/master/Solutions/Business.StarterIntranet.
This https://github.com/SharePoint/PnP/blob/master/Solutions/Business.StarterIntranet/app/src/modules/TaxonomyModule.tscould be very useful for your case (see the getNavigationTaxonomyNodes nethod). You don't need to use the full solution.
Franck.
