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
  • Santosh Kalange
    Posted at 3:01 am September 26, 2022
    Santosh Kalange
    Reply
    Author

    Hi Tom

    Can you please help me for Multi-Level side-nav-bar – css changes in given code.

    It was working upto level 2, as per you required css change for multi level can you please guide for what change required.

  • Santosh Kalange
    Posted at 6:15 am September 14, 2022
    Santosh Kalange
    Reply
    Author

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

    It works almost perfectly, but not quite. I have created main items and subs for the main ones it works perfectly, but when i created other subs for subs ones it will not work
    For me its working for 2 levels perfectly but not more than 2 levels can you suggest how it will support more than 2 level child/sub menu

    • Tom Daly
      Posted at 12:57 pm September 14, 2022
      Tom Daly
      Reply
      Author

      The code will support as many levels as you want but the CSS is designed for only 2 levels. If you need more you will need to make the necessary changes to the css to suite your needs. thanks for the feedback

      • Santosh Kalange
        Posted at 1:57 am September 15, 2022
        Santosh Kalange
        Reply
        Author

        Thank you for quick response.
        I am very new for spfx therefore can you please suggest what level of change or what i have to change in css part ?
        can you please help me in this.

  • Santosh Kalange
    Posted at 7:28 am September 13, 2022
    Santosh Kalange
    Reply
    Author

    Hi Tom,
    I am facing below issue while build. Unable to find the exact solution kindly help me for solve this.
    Please find my configuration details. As mention i have install SPFx v1.4 and node :- v12.16.2

    Error: File not found with singular glob: C:/Santosh/spfxPrjs/spfx-side-navigation-master/spfx-side-navigation-master/typings/main.d.ts (if this was purposeful, use `allowEmpty` option)

  • Austin Lorans
    Posted at 2:30 am July 31, 2022
    Austin Lorans
    Reply
    Author

    Hello, there?
    I want to run this extension on my local and custom.
    Is this possible?

    If you can help me, please let me know.
    Thanks
    Austin

    • Tom Daly
      Posted at 4:04 am August 2, 2022
      Tom Daly
      Reply
      Author

      you can run gulp serve and then load the debug urls. Chrome SPEditor has a menu item to load debug urls from your o365 site.

  • Lamiaa Mamadouh
    Posted at 12:50 am May 13, 2022
    Lamiaa Mamadouh
    Reply
    Author

    I really cannot thank you enough for your great support and immediate response you deserve always to be even more that MVP

  • Lamiaa Mamadouh
    Posted at 1:55 pm May 12, 2022
    Lamiaa Mamadouh
    Reply
    Author

    Dear Tom Thank you so much for this amazing project regarding your spfx-side-navigationcon github – I am trying to deploy it I followed exactly all the deployment steps
    navigation bar is only working in edit mode of the page but when I publish the page the navigation bar disappears do you know why it is doing that plz I tried on both teams site and communication site –

  • Alain
    Posted at 9:50 am January 7, 2022
    Alain
    Reply
    Author

    Bonjour Thomas,
    Bravo pour votre application. Je souhaiterais mettre en francais tous les éléments de la liste. Pourriez vous me dire à quel endroit je dois faire les modifications .
    Merci beaucoup
    Bien cordialement
    Alain

    • Tom Daly
      Posted at 2:36 am January 13, 2022
      Tom Daly
      Reply
      Author

      Bonjour,

      i’m guessing you want to support more than 1 language? If you feel comfortable to update the code you could add a column and use the language code as the field name [fr], in your case French. in the code – the SideNavProvider in the select statement you would add the new column so that it gets pulled in.

      SideNavProvider

      .items.select(
      “Title”,
      “SideNavUrl”,
      “SideNavIconSvg”,
      “SideNavOpenInNewWindow”,
      “SideNavParent/Title”,
      “fr”
      )

      Next in the provider you would need some code to detect the language.

      Add these
      27 const frenchTest = //code to detect french browser or locale
      28 const itemTitle = frenchTest ? item.fr : item.Title

      update these
      29 siteNavItems.push({
      30 title: frenchTest ? item.fr : item.Title, // IF FR USE THE item.fr … IF not use item.Title
      31 svg: item.SideNavIconSvg,
      32 url: item.SideNavUrl,
      33 openInNewWindow: item.SideNavOpenInNewWindow,
      34 subNavItems: this.getSubNavItems(items, item.Title)

  • 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

        • Santosh
          Posted at 7:26 am September 13, 2022
          Santosh
          Reply
          Author

          Hi I am also facing same issue, can you please help me for exact version which solve the issue.
          I am using
          node :- v12.16.2
          npm :- 8.18.0

  • 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 to Andre L
    Cancel Reply

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