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].

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
  • SP Hero
    Posted at 5:47 pm August 13, 2021
    SP Hero
    Reply
    Author

    When I tried to run gulp build the error I get is a file not found with singular glob “/typings/main.d.ts”

    • Tom Daly
      Posted at 3:34 am August 14, 2021
      Tom Daly
      Reply
      Author

      I have seen this before but don’t recall the fix. There was a time that a bunch of d.ts files where being created and I had to delete them all. Some issue with one of the settings .json files I believe. I will check and get back to you.

    • Tom Daly
      Posted at 3:40 am August 14, 2021
      Tom Daly
      Reply
      Author

      What project are you using, o365 or sp2019? I just pulled down and it’s building fine. using node 10.24.1, gulp 3.9.1

      • SPHero
        Posted at 1:08 am August 16, 2021
        SPHero
        Reply
        Author

        I have node 14 and gulp 4

        I will try it with node 10 and gulp 3.9.1. I wish spfx wasnt so picky about the node version.

        its o365.

        Thanks for the response

      • SPHero
        Posted at 1:51 pm August 16, 2021
        SPHero
        Reply
        Author

        I got it working it was the version of node and gulp that was causing the errors.

        Thanks for your help

  • Peter Bennett
    Posted at 7:49 pm April 2, 2021
    Peter Bennett
    Reply
    Author

    Hello Tom,

    Please ignore my previous question. I figured it out. The parent cannot have a URL.

    Thanks for creating this!

    -Pete.

  • Peter Bennett
    Posted at 11:48 pm April 1, 2021
    Peter Bennett
    Reply
    Author

    Hello Tom,
    Thanks for this project. It fills a need!

    It is also the first SPO app I have ever built and deployed, other than a Hello World.

    It works almost perfectly, but not quite. I have created main items and subs for the main ones and they work when the nav bar is minimized, but when I maximize it and click on the dropdown toggle, it just navigates to the parent link.

    Am I missing something?

    Here’s the data I used:

    Title Url Order Parent
    Home https://airpete.sharepoint.com/sites/airpete 0
    Amazon https://amazon.ca 0
    Google https://google.com 1 Home
    Zombo http://zombo.com 2 Home
    Amazon sub 1 https://amazon.com 3 Amazon
    Amazon Sub 2 http://google.ca 4 Amazon

    I tested on Edge and Chrome, same results.
    Any idea?

    Thanks.
    -Pete.

  • Christoph
    Posted at 10:34 am December 16, 2020
    Christoph
    Reply
    Author

    Hi Tom,

    is there an update concerning the supported browsers? I tried it in our SharePoint Online environment but the navigation entries aren’t display correct. I am using the new Edge browser.

    regrads, Christoph

    • Tom Daly
      Posted at 1:23 am December 19, 2020
      Tom Daly
      Reply
      Author

      not that i know of. I’ll check it out this weekend to see if there is anything regarding edge. these project work good about a year ago but the environments are ever changing.

  • 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

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