SharePoint 2013 : Working on navigation using REST API

SharePoint 2013 : Working on navigation using REST API

1) To access the global navigation links, we can use jQuery and make an AJAX request to fetch the links as below:

On any SharePoint page, add a "script editor web part" or "content editor web part" or in the master page, add the script tags.

Add the below script :


$(document).ready(function () {  
    //call the function on document.ready
    getNavigationSiteMap();
});


function getNavigationSiteMap() {
    // Getting our links to render
    $.ajax({
     
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/navigation/menustate?mapprovidername='GlobalNavigationSwitchableProvider'",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            // Returning the results
            getNavigationSiteMapSuccess(data);
        },
        error: function (data) {
            getNavigationSiteMapfailure(data);
        }
    });
}

function getNavigationSiteMapSuccess(data)
{  
    if (data != null)
    {
        var result = data.d.MenuState;
     
        //Binding datasource result to JQuery template
        $("#SiteMapTemplate").html(result);
    }


}

function getNavigationSiteMapfailure(result)
{  
    console.log("Failed getting navigation data!");
}


2) To create a link in the quick launch bar or in the top navigation bar, we have two REST endpoints:

QuickLaunch endpoint - /_api/web/Navigation/QuickLaunch

TopNav endpoint - /_api/web/Navigation/TopNavigationbar



Creating link in quick launch -

//Create a Quicklaunch Navigation
function createQuickNavLink() {
    var quickLaunchUrl = _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: quickLaunchUrl,
        type: "POST",
        data: JSON.stringify({
            "__metadata": { type: "SP.NavigationNode" },
            'IsExternal': true,
            'Title': "Google",
            'Url': "http://google.co.in"
        }),
        headers: headers
    });
    call.done(success);
    call.fail(failure);
}
function success(data, textStatus, jqXHR) {
   SP.UI.Notify.addNotification("Navigation created Successully", false);
  }
function fail(error) {
    console.log("request failed: unable to create navigation: " + JSON.stringify(error));
}


Creating a link in Top Navigation bar - 

//Create a top navigation link
function createTopNavLink() {
  var topNavUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/navigation/TopNavigationbar";
    var headers = {
        "accept": "application/json;odata=verbose",
        "content-Type": "application/json;odata=verbose",
        "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
    }
    var call = jQuery.ajax({
        url: topNavUrl,
        type: "POST",
        data: JSON.stringify({
            "__metadata": { type: "SP.NavigationNode" },
            'IsExternal': true,
            'Title': "Google",
            'Url': "http://google.co.in"
        }),
        headers: headers
    });
    call.done(success);
    call.fail(fail);
}

function success(data, textStatus, jqXHR) {
   SP.UI.Notify.addNotification("Top navigation link created Successully", false);
  }
function fail(error) {
    console.log("request failed: unable to create top navigation link: " + JSON.stringify(error));
}