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
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.
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
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
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.
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)
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
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.
I really cannot thank you enough for your great support and immediate response you deserve always to be even more that MVP
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 –
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
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)
When I tried to run gulp build the error I get is a file not found with singular glob “/typings/main.d.ts”
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.
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
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
I got it working it was the version of node and gulp that was causing the errors.
Thanks for your help
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
Hello Tom,
Please ignore my previous question. I figured it out. The parent cannot have a URL.
Thanks for creating this!
-Pete.
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.
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
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.
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.
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.