Introduction

In this article, we have explored how to add links represented as headings in the Quick Launch area of the user interface using REST API. Here, we tried to add custom navigation node corresponding to the links in the Quick Launch area of the site using REST API using jQuery.

Prerequisites

REST API QuickLaunch EndPoint to use in Add_ins -

/_api/web/Navigation/QuickLaunch

Scenario

We have created the host site and have by 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).

SharePoint

Objective

We have added one custom navigation node `' Notebook" to the Quick Launch (i..e Left Navigation) on button click.

Use the procedure given below.

Step 1 Navigate to the SharePoint 2013 site.

Navigate to the SharePoint 2013 site.

Step 2 Site actions

From this page, select Site Actions | Edit Page.

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 3 Insert HTML and/or JavaScript

Once the Web Part is inserted into the page, we will see an "EDIT SNIPPET" link; click it. We 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"
 }), 
 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

Click " Create Navigation" button.

SharePoint