SharePoint Online navigation links and themes

[Conan McDonnell]

Hi.

I have been asked if it's possible to re-design SharePoint navigation so that instead of links appearing along the top of the Site, they appear vertically on the left in the form of clickable buttons. I know it sounds a little old-fashioned but that's the requirement. Example attached.

How would that be achieved as a Theme applied throughout the Site? 

Would this be a case of going back to school and learning CSS and Javascript or is there an easier way?

Many thanks for your help!

Conan McDonnell

[#2 · Accepted solution]

@Conan McDonnell Hello, I am afraid that the solution you want to achieve will be quite difficult. There is no "out-of-the-box" way of solving this, you will need to develop a custom solution. Please note that I do not recommend to build a custom vertical navigation. The navigation would need to be visible through entire SharePoint and maintained for when Microsoft makes changes that might interfere with your solution. 

However, if you insist and this really is important for your company. In communication sites, you can add a vertical section for the page (but it will be on the right side). In that section, you could add a SPFx solution that contains your navigation with desired styling and functionality. 

Vanilla CSS and JavaScript will not be enough for this implementation. 
Read more about prerequisites here: 
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-p...

[#3]

@ArefHalmstrand 

Hi Aref

Many thanks for your reply.

It confirms what I vaguely suspected - that the Modern Interface is quite tricky to customise heavily and may not support these customisations in future iterations anyway.

I am going to create something broadly similar using clickable buttons for the Home page only but indicate to the people who made the requirement that setting this up as a Theme would probably  not be cost-effective, especially due to the update cycle of SharePoint.

Thanks again

Conan

[#4]

@Conan McDonnell You are very welcome! 

Tip: I have not tested this yet... However, with SPFx extension, you could create your own header. In that header (that is visible globally) you could add a "hamburger menu" that expands the vertical navigation that you want. 

If you feel like your questions has been answered, would you mind marking this or the former post as best reply? 

Thank you!

Yours sincerely,
Aref Halmstrand

[#5]

@ArefHalmstrand 

Thanks Aref.

I think they want the menu to display permanently. Personally, I feel it's a bit retrograde.

Cheers

Conan