SharePoint 2013 Create and Customize Custom Left or Quick launch Navigation

sharepoint 2016 left navigation menu customization
Sign up for an Office 365 SharePoint Online Business Subscription


Introduction:
Here we will discuss how we can create custom left navigation (quick launch) using out of box feature without using any custom solution in SharePoint 2013. As we know that there are a lot of ways of creating left navigation, here you will see a new approach for creating a custom left navigation in SharePoint 2013. This is the same way you can customize quick launch in SharePoint 2016.


Scenario:
There can be a requirement where we have to create multiple views of a same list and the names of the views are given on the left hand side like the left navigation. And when clicked on the links on the left navigation we get directed to their respective pages on the site.

Solution:
Step-1: Creation of lists

1. Here I have created a custom list (Information List) and following three views on the list viz. Personal Information, Project Information, Accounts Information.



sharepoint 2013 custom left navigation
sharepoint 2013 custom left navigation

Step-2: Creation of Pages

1. Click on the gear at the top right of your site and Add a page, we are creating pages in the Pages library and not Site Pages.

sharepoint 2013 customize left navigation menu
sharepoint 2013 customize left navigation menu

2. Give the Name of the Page (I would recommend that the Name of the page should be the Name of view you created in the Information List) and Create.
3. Create the pages for all the Views in the List whose link you need in the left navigation.
4. Once the page is created, you see a blank page now we need to add a layout “TwoColumnLeft” to the page.


sharepoint online left navigation menu customization
sharepoint online left navigation menu customization

5. After Adding the Layout we see two zones Main Zone and a Left Zone.

sharepoint 2013 left navigation branding
sharepoint 2013 left navigation branding

Step-3: Adding Custom List on created pages as webparts

Read some SharePoint 2013 tutorials below:

1. Add Information List as a webpart in the Main Zone. Click Add Webpart and select the List under Apps Categories.

edit quick launch sharepoint 2013
edit quick launch sharepoint 2013

2. Once the Information List is Added Edit the List webpart and Select a default view for the page.
For Example: If you are on a Personal Information page Select the Personal Information view on the webpart.



customize quick launch navigation sharepoint 2013
customize quick launch navigation sharepoint 2013

3. In the Toolbar dropdown select No toolbar to give a nice look of just information, as you please, apply the changes and check-in the changes made on the page.

sharepoint 2013 left navigation menu customization
sharepoint 2013 left navigation menu customization

Step-4: Creation of Links List

1. Go to Add an App and select the Links template.
2. Create a Links list (Test Navigation) and added a Link (item) to the list where the URL has the complete URL of the created Page and Description is the Title of the Left Navigation link which will be displayed on the Left Navigation.

sharepoint 2013 quick launch branding
sharepoint 2013 quick launch branding

3. Do this for all the links you want to show in the left navigation and complete creation of the Navigation Links.

create custom left navigation menu sharepoint 2013
create custom left navigation menu sharepoint 2013

Step-5: Adding Links List on created pages as webparts

Read some SharePoint 2013 tutorials below:

1. As we added Information list on the Main Zone of the pages add Test Navigation to the Left Zone of all the pages.

sharepoint 2016 quick launch branding
sharepoint 2016 quick launch branding

2. After Adding Test Navigation in the Left Zone and checking in the changes on the page the page will look like this

customize quick launch navigation sharepoint 2016
customize quick launch navigation sharepoint 2016

Step-6: Giving References of .js and .css files

1. The Left Navigation is ready now we have a .js file and a .css file whose reference we need to give on the Test Navigation Webpart to Make it appear like a left navigation.
2. Go to Test Navigation webpart and edit edit Webpart.
3. Add the JS reference in the JS link section of the window and the css is referred from within the JS file.

sharepoint 2016 left navigation menu customization
sharepoint 2016 left navigation menu customization

3. Add the following JS link in the JS Link section “~sitecollection/SiteAssets/LeftNavigation.js”
4. Make sure the hierarchy of the site collection and web is correct in the JS reference.
5. Apply the Changes and your Test Navigation links.
6. Follow the same steps for the remaining pages you created and you will see the Information List’s Views will appear as follows
7. Note the .aspx page in the address bar.

sharepoint 2016 custom left navigation
sharepoint 2016 custom left navigation

This creates your Custom Left Navigation or to customize quick launch in SharePoint 2013 or SharePoint 2016.


You can download the project here.


You May Also like the Following SharePoint Online Tutorials:

About Akash Kumhar

I am Akash Kumhar a SharePoint Consultant.

View all posts by Akash Kumhar →