I started this project over a year and a half ago and at the time Modern SharePoint starts gaining some traction with organizations. I remember SPFx v1.4 was being released at the time and how far we’ve come from that today. I still find this project very interesting and useful today. It’s something different and on communication, sites can give you an option for navigation. Without further delay, I present to you the Side Navigation Project [inspired by the Office 365 Admin Tenant Navigation].

New call-to-action

Currently Supported [O365/SP2019 – IE11, Chrome, FF]

The Side Navigation Project with full documentation can be found in my github repo https://github.com/tom-daly/spfx-side-navigation . That’s where you will find the installation guide and documentation. Please post any issues there – I’ll do my best to help if you are having trouble. This blog’s purpose to give a bit of background on the project and help showcase it.

About the Project

The Side Navigation purpose is to add a left navigation on Modern Communication site template that is unobtrusive to the main UI. It’s normally slim and compact but can be easily expanded to see what the icons nodes are.

What makes it very cool is the fact that you can incorporate ANY svg icon. The only requirement is that it’s a single color icon – we use the SVG code in the list item and this allows us to recolor it along with the navigation nodes!

Installation

On installation and activation within your site it will create a list called Side Nav List. This list contains all the information needed to sustain the navigation. You can even create sub nodes b/c the list contains a lookup to itself. [this could be extended to infinite levels however the css does not support that currently / the code does]

The Side Navigation is an SPFx application customizer that lives in the header area (if you are familiar with the placeholders) but it styles itself to the left of the page and pushed the main content over 50px. It fits nicely under the waffle or app launcher.

Customization

Colors

You might be looking at it and say those colors aren’t going to fit site theme. We’ll you can download the solutions and QUICKLY change the colors of the site-menu.css file.

Icons

You can use any monochrome SVG you want as long as you can access the source [just open it in notepad]. SVG’s are freely available for a few dollars. My favorite sites for SVGs

Navigation (advanced)

Lastly the data source. Currently a list is deployed to the site on installation of the app. However you can make this global if desired. You can check out my global navigation project. You can modify the navigation provider to point to another source and when you deploy this out to various sites it will connect back to that source list.

Check out the global navigation project and the GlobalNavProvider code – here … and you can see how i feel that provider a url. The current project also has a SideNavProvider which is set to look for the list in the current site but with a little develop know how you can change that !

Why Navigation?

If you haven’t seen my github repo’s before I have specialized in UI for all versions of SharePoint and I have many navigation projects going back to 2010/2013. If you like this project you’ll also like the Global Navigation Solution. It’s literally the same code! 😉 just styled a bit differently. The global navigation has some other enhancements as people have helped by submitting issues and requests. You can check that out here https://github.com/tom-daly/spfx-global-navigation

Comments
  • Andre L
    Posted at 6:38 am June 11, 2020
    Andre L
    Reply
    Author

    First of all congrats, really nice sample ,

    I understand you are using the images and this is a plus, another option is the OOB navigation and REST api _api/navigation/menustate api to replicate and avoid custom lists.
    The idea is great, but this will hit with current out of the box responsive left Menu, if you reduce the browser the icon for left menu appear 2 left navigation (can be easily mitigate off course ), it’s a petty that current api doesn’t give a option to override current left navigation (the same we have for the header and footer), this could avoid UI impacts.
    Really great sample, maybe we could request this option to be override in the user voice (i dont belive they will touch that but ok).

    This are my 5 cents and congrats.

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

      Thanks for the positive feedback!

      Good suggestion on the menu provider in fact my older bootstrap navigation project uses that. The custom list was to support svg images, the customer actually wanted even more options like a VPN [yes/no] field so another icon would show. That is how this project was born. It was also created before the responsive menu but you bring up another great point. I’m hiding that menu with css but i think they should start opening up other app customizer for us to inject into. Most of my clients ask for things we shouldn’t do / Microsoft doesn’t support.

  • Leave a Reply to Andre L
    Cancel Reply

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