This post focuses on showing customized navigation on the left in SharePoint online modern sites.
Left navigation has been present in SharePoint since a decade and in current modern era navigation have moved to top.
Many clients still prefer the navigation to appear on left and hence this attempt to build an idea around it.
At present there is no provision to show a customized navigation on the left except for the app bar that comes with options like Global navigation, my sites, my news, my files and my lists. Picture shown below –
There are 2 ways i propose to design the solution using SharePoint Framework application customizer –
- Present a navigation button on the top placeholder to show the navigation.
- Render a navigation pane by injecting a custom css placeholder.
We will be using ContextualMenu object of office UI fabric react library to render the navigation.
So let’s start by –
Table of Contents
Creating an application extension project in SPFx.
If you are not clear how to build a development environment for SPFx then pls check below links for the same –
Getting started with SharePoint Framework
Building your first application extension
Adding JQuery support
Next step is to add JQuery support to the project, which can be done using following steps –
Installing JQuery types using the below command –
npm -i @types/jquery
Once installed we need to add the path of the CDN in the config.json file as an external –
Create left navigation component file.
We need to create a file which would hold the logic of rendering navigation. This could be picking navigation items from the list or taxonomy or any other source. In this demo we would be hardcoding the values for the navigation.
Create LeftNavigation.jsx under src folder.
First Approach – Placing navigation on top placeholder.
In LeftNavigation.jsx import references of the necessary packages –
Create a function component and add an array for context menu –
const menuProps = useConst<IContextualMenuProps>(() => ({
shouldFocusOnMount: true,
hidden: false,
items: [
{
key: 'Actions',
itemType: ContextualMenuItemType.Header,
text: 'Actions',
itemProps: { lang: 'en-us' },
},
{
key: 'upload',
iconProps: { iconName: 'Upload', style: { color: 'salmon' } },
text: 'Upload',
title: 'Upload a file',
},
{ key: 'rename', text: 'Rename' },
{
key: 'share',
iconProps: { iconName: 'Share' },
subMenuProps: {
items: [
{ key: 'sharetoemail', text: 'Share to Email', iconProps: { iconName: 'Mail' } },
{ key: 'sharetofacebook', text: 'Share to Facebook' },
{ key: 'sharetotwitter', text: 'Share to Twitter', iconProps: { iconName: 'Share' } },
],
},
text: 'Sharing',
ariaLabel: 'Sharing. Press enter, space or right arrow keys to open submenu.',
},
{
key: 'navigation',
itemType: ContextualMenuItemType.Header,
text: 'Navigation',
},
{ key: 'properties', text: 'Properties' },
{ key: 'print', iconProps: { iconName: 'Print' }, text: 'Print' },
{ key: 'Bing', text: 'Go to Bing', href: 'http://www.bing.com', target: '_blank' },
],
}));Overall code would look like below –
We are done with the LeftNavigation.jsx file. Now we need to render the component in application customizer type script file.
In the ts file, import the left navigation component –
import Navigation from “./LeftNavigation”;
Next in the renderplaceholder method, use react DOM to render the component –
If you see the output, it would be something like this –
That is all for the first approach.
Second approach – Injecting custom css placeholder.
In this approach we will be injecting custom css to render our left navigation.
In the LeftNavigation.jsx we need to make adjustments in the code and make use of ContextMenu class to build navigation.
Code is as below –
import * as React from 'react';
import { ContextualMenuItemType, ContextualMenu }
from 'office-ui-fabric-react/lib/ContextualMenu';
export default function Navigation() {
return (
<>
<ContextualMenu
shouldFocusOnMount={true}
shouldFocusOnContainer={true}
target={{ x: 49, y: 158 }}
items={
[
{
key: 'Actions',
itemType: ContextualMenuItemType.Header,
text: 'Actions',
itemProps: { lang: 'en-us' },
},
{
key: 'upload',
iconProps: { iconName: 'Upload', style: { color: 'salmon' } },
text: 'Upload',
title: 'Upload a file',
},
{ key: 'rename', text: 'Rename' },
{
key: 'share',
iconProps: { iconName: 'Share' },
subMenuProps: {
items: [
{ key: 'sharetoemail', text: 'Share to Email', iconProps: { iconName: 'Mail' } },
{ key: 'sharetofacebook', text: 'Share to Facebook' },
{ key: 'sharetotwitter', text: 'Share to Twitter', iconProps: { iconName: 'Share' } },
],
},
text: 'Sharing',
ariaLabel: 'Sharing. Press enter, space or right arrow keys to open submenu.',
},
{
key: 'navigation',
itemType: ContextualMenuItemType.Header,
text: 'Navigation',
},
{ key: 'properties', text: 'Properties' },
{ key: 'print', iconProps: { iconName: 'Print' }, text: 'Print' },
{ key: 'Bing', text: 'Go to Bing', href: 'http://www.bing.com', target: '_blank' },
]
}
hidden={false}
/>
</>
);
}
In the ts file we would be making use of JQuery to inject css classes –
Add reference for JQuery –
import * as jQuery from ‘jquery’;
In the onInit function we would be adding LeftNav div before mainContent class and making space for our navigation by adding left padding to it.
Code would look like below –
Next in the renderplaceholder method, render the left navigation component in the LeftNav div we injected previously.
The output would come as below –
And that concludes second approach as well.
Second approach will have some downsides and some work related to positioning and responsiveness needs to be done when user scrolls down the page or views it in smaller devices.
That’s is for this blog, let me know guys in the comments what you thought of the 2 approaches and suggest something if you have any better ideas for left navigation.