Add left navigation links using REST API in SharePoint

This SharePoint customization tutorial, we learned how to add left navigation or quick launch links using Rest API in SharePoint 2013 or SharePoint Online.

Here, we will explore represented as headings in the Quick Launch or left navigation area of the user interface in SharePoint 2013 site using REST API.

Here we tried to add custom navigation node corresponding to links in the Quick Launch area of the site using REST API using jQuery.

Add left navigation links using REST API in SharePoint

Creating Navigation in the Quick Launch( i..e Left Navigation)
REST API QuickLaunch EndPoint to use in Add_ins:

 /_api/web/Navigation/QuickLaunch

I have created the host site and have default added multiple Quick Launch navigation nodes. Now, let’s say we want to “Add one Custom navigation nodes ‘’ Notebook” in the Quick Launch(i..e Left Navigation).

I have Added one Custom navigation nodes “Notebook” in the Quick Launch(i..e Left Navigation) on button click.

Follow below steps:

Step-1:
Navigate to your SharePoint 2013 site and and from this page, select Site Actions | Edit Page. Then Edit the page, go to the “Insert” tab in the Ribbon and click “Web Part” option. In the Web Parts picker area, go to the “Media and Content” category, select the Script Editor Web Part, and press the “Add” button.

Step-2
Once the Web Part is inserted into the page, you will see an “EDIT SNIPPET” link; click it. You can insert HTML and/or JavaScript, as shown below.

<script type="text/javascript" src="../…/SiteAssets/Script/jquery-1.10.2.js"></script>

<script type="text/javascript">
$(document).ready(function ($) {
$("#createQuickLaunch").click(function () { createQuickLaunch() });
});

//Create a Quicklaunch Navigation

function createQuickLaunch() {
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/navigation/QuickLaunch";
var headers = {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
}

var call = jQuery.ajax({
url: endPointUrl,
type: "POST",
data: JSON.stringify({
"__metadata": { type: "SP.NavigationNode" },
'IsExternal': true,
'Title': "Notebook",
'Url': "http://www.testnotebook.com"
}),
headers: headers
});
call.done(successHandler);
call.fail(failureHandler);
}

function successHandler(data, textStatus, jqXHR) {
SP.UI.Notify.addNotification("Navigation created Successully", false);
}

function failureHandler(errorMessage) {
alert("Request Failed: unable to Navigation: " + JSON.stringify(errorMessage));
}
</script>

Final output:

On click ” Create Navigation” button.

You may like following SharePoint tutorials:

• How to hide Notebook and Site contents from quick launch in SharePoint Online
• Add Recycle Bin link in quick launch in SharePoint
• SharePoint 2013 Left Navigation or Quick Launch Menu Customization
• Hide Recent Items from Quick Launch in SharePoint Online
• How to hide left navigation links in SharePoint based on user permission in jQuery
• Accordion Style Left Navigation using JQuery and CSS in SharePoint 2010
• Edit Links missing in left and top navigation in SharePoint
• Target audience not working in left side navigation in SharePoint 2013 site
• Create managed metadata navigation in SharePoint 2013/2016
• Different Types of Navigation in SharePoint 2013/2016/Online
• How to Call SharePoint Search using REST API
• SharePoint Rest API code not working after saving page

This tutorial, we learned how to create left navigation or quick launch links using Rest API in SharePoint Online or SharePoint 2013/2016.