TL;DR Go here for the code + instructions: https://github.com/tom-daly/spfx-global-navigation
Modern version works with: Office 365 & SharePoint 2019 – IE 11, Chrome, Firefox.
Classic version works on any SharePoint [yes any] – IE 11, Chrome, Firefox

Introduction

Maintaining a consistent navigation across all site collections has always been a problem for SharePoint. Site collections do not share navigation. The story goes back to the beginning of SharePoint’s existence. In earlier versions 2007, 2010… it was recommended to break up sites into site collection to keep the content database sizes small. Microsoft had recommended maximums for best performance. Ultimately the content of SharePoint are table in a SQL databases and small databases meant faster, more manageable backups. Alternatively you could have all your sites in one site collection and then all the out of the box navigation options would be perfect.

Enter Modern… Each modern site is a site collection. This approach creates a flat hierarchy of sites. Each site collection having its own navigation, security, look and feel, content, components and more.

How can you create a consistent navigation across modern pages? Microsoft’s answer is to use Hub sites. “Hubbing” your sites will add a hub site navigation element to the top of the page.

Great! Hub sites to the rescue… What if you have some classic sites? Most organizations are currently in a hybrid mode of classic and modern pages. You can’t hub classic sites.

This blog will cover the solution that I built to add a list based navigation to modern pages using SPFx application customizer. But wait there’s more… It will also show you how you can use the same code base and repackage it to work on Classic SharePoint sites as well. Essentially creating the perfect cross site collection navigation solution that works on both classic and modern.

Solution Overview

The solution is broken down into a couple of parts. This blog is meant to explain the approach and the github repository contains an in depth guide to install and provision.

  1. Navigation List – PnP Powershell Template + Provisioning scripts
  2. SPFx application customizer – Global Navigation – React Component

Step 1 – Provision the Global Navigation List

I’m all about repeatable provisioning – as a developer I almost never create anything manually. In this solution I use Powershell PnP, mainly the provisioning template to provision the site columns, content types and list schema and connecting a lookup like with a cmdlet.

Using the list based approach, I can centrally host the list in the root site of the tenant where my users generally have read access. In the case that you have secured the root site from users, you could break permissions on the Global Nav List and grant read only access.

The list based approach has benefits that I like:

  1. It’s easy to talk to the list and using a simple rest query or PnP-JS as I do in this solution.
  2. Lists can be security trimmed so you can hide nodes from certain groups by breaking inheritance on those items. For those items they would have item level permissions.
  3. Lists are easy to work with for the end users, they don’t need lengthy instructions on how to manage the navigation

The entire list is easily deployable via the deploy.ps1 in the provisioning folder of the project. Check that out for an example of a template and the standard script I use to provision assets via Powershell PnP

Step 2 – SPFx Application Customizer

As of now the only way to install the solution is to build it. Clone or fork the repo and you’ll need to have a SPFx development environment in order to complete the build. Check out the github for the full instructions. Once you have the code, the build and deployment is the standard process for SPFx apps.

Future versions I might include a package that you download, let me know if that’s something you might want. Most people will want to at least customize the colors and best way is to get the code and do it yourself.

The SPFx Application Customizer lives inside the Header placeholder on any modern site that you add the app to. The code has been written such that it makes a call to the Global Nav List on the “/” root site of the tenant. You could change that location in the code and rebuild if you desired by modifying the GlobalNavProvider.ts

Global Navigation

Once you’ve installed the list, add some nodes, deploy the app customizer, activate the app on a site you should get something like this below. The navigation can support as many levels as you want.

Classic Build

Yes it works on Classic SharePoint as well. By far the coolest part of this whole project. How can that be? For the complete explanation check out this article: SPFx Application Customizer that works on Classic SharePoint Sites.

Classic site deployment process is different. It’s not an app / app package. The solution creates a separate JavaScript file that is uploaded to your site and linked via a site script link.

To generate the latest JavaScript run the build.cmd. That will generate both a new .sppkg for Modern sites and the .js file for Classic sites. After a successful build, the top-navigation.js file will be in the classic-dist folder.

If you want an automated deployment approach you would also want to run the deploy.ps1 file. The deploy script will upload the file and attach the JavaScript to your site collection. If deploying to multiple sites it’s a good ideal to centrally host this file in a CDN.

Once the file is attached via a script link, it’s live. Your site should look like this.

Conclusion

There you have it, a global navigation solution built for Modern sites using SPFx, Powershell PnP, PnP-JS, and Office UI Fabric that also works on Classic sites. One code base to maintain for both versions of SharePoint. This provides a flexible, consistent navigation for customers that have a mix of Classic & Modern sites.

Comments
  • J. Smiley Baltz
    Posted at 2:41 pm June 11, 2020
    J. Smiley Baltz
    Reply
    Author

    Tried implementing this several times for O365 – always a correlation error.

    • Tom Daly
      Posted at 7:16 pm June 13, 2020
      Tom Daly
      Reply
      Author

      I’ll check it out today/tomorrow and let you know. thanks for telling me which version you are using. I recently made some changes that worked on here but i’ll try it out on my new machine.

    • Tom Daly
      Posted at 11:12 pm June 13, 2020
      Tom Daly
      Reply
      Author

      I just pulled down and I’m not getting a correlation ID issue however i am not able to see the global navigation anymore. I’m going to rebuild the o365 version of the project with the latest spfx version. You can use the sp2019 version. I just updated that and made sure it builds works for o365 as well.

      I successfully built and deployed the sp2019 version to o365 today, using a fresh pull from git / on a clean machine.

      tonight i’ll fix up the o365 version. thanks again for pointing this out. sorry you had so much trouble.

      • Tom Daly
        Posted at 4:06 am June 14, 2020
        Tom Daly
        Reply
        Author

        refreshed the entire project for the o365 version. brought it up to spfx v1.10.0 and replace office ui fabric icons with font awesome icons since office UI doesn’t seem to work anymore. It’s all functioning as expected. I need to double check the classic build to make sure that all works. It you O365 exclusively then this will work.

  • Rich
    Posted at 3:39 pm April 23, 2020
    Rich
    Reply
    Author

    Hi Tom, love the idea of your solution. I’m targeting SharePoint 2019 instead of SPO. I’ve changed the .yo-rc json file and modified the environment and version parameters. Anything else I need to consider to make this a deployable solution for 2019? Thanks for the impressive work.

    • Tom Daly
      Posted at 2:59 pm April 29, 2020
      Tom Daly
      Reply
      Author

      I had some feedback about the spfx version being higher than sp2019 supports and some feedback about deployment not working. I’ll be testing over the weekend and hopefully have some more guidance on sp2019 deployments.

    • Tom Daly
      Posted at 1:28 pm May 4, 2020
      Tom Daly
      Reply
      Author

      I have posted an update in the github repo for a specific 2019 version built on spfx v1.4.1. Classic mode won’t build due to webpack issue which I am still working on.

  • Louis Farho
    Posted at 7:05 pm April 13, 2020
    Louis Farho
    Reply
    Author

    Hi Tom,
    I see you updated your solution for spfx 1.9.1. Is there an old version so that this could be built for SharePoint 2019 which is limited to spfx 1.4.1? Not seeing how I can pull a different version of the code.

    Thanks for your time in advance!

    • Tom Daly
      Posted at 2:56 pm April 29, 2020
      Tom Daly
      Reply
      Author

      yes i did recently update this. I will been checking sp2019 deployment again this weekend. I believe that I did not have a problem deploying but ill confirm. thanks for the feedback.

    • Tom Daly
      Posted at 1:28 pm May 4, 2020
      Tom Daly
      Reply
      Author

      I have posted an update in the github repo for a specific 2019 version built on spfx v1.4.1. Classic mode won’t build due to webpack issue which I am still working on.

  • BH
    Posted at 7:24 pm October 14, 2019
    BH
    Reply
    Author

    I tried to add the extension in my spfx and provisioned the global nav list.But the menu is not changing.

    • Tom Daly
      Posted at 1:28 am February 16, 2020
      Tom Daly
      Reply
      Author

      menu could be cached in session storage, either disable it and rebuild or open in new window after menu changes.

  • Leave a Reply to J. Smiley Baltz
    Cancel Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.