With a short JavaScript it is possible to add navigation nodes in a SharePoint site (quicklaunch and top navigation bar). This is useful, when an internal link should be added. Adding internal links is not possible using the user interface in the browser in SharePoint. In the following example we define the new nodes in an array at the beginning. The code block takes this array and sets the navigation. It makes sense to remove the existing entries at the beginning. An example for removing could be found here.

<script type="text/javascript" language="javascript">

    var navArray = [
	{ title:"Home", url:"/sites/gms-portal", isExternal:false },
	{ title:"Microsoft", url:"http://www.microsoft.com", isExternal:true },
	{ title:"Google", url:"http://www.google.com", isExternal:true },
	{ title:"Bing", url:"http://www.bing.com", isExternal:true }
    ];

    function checkArray() {
		for (var i = 0; i < navArray.length; i++) {
			var navObject = navArray[i];
			
			alert(navObject.title);
		}
	}
	
    var navigationNodeCollection = null;
    var nnci = null;
	
	function addNavigationNodes() {
        var clientContext = new SP.ClientContext.get_current();

        if (clientContext != undefined && clientContext != null) {
            var web = clientContext.get_web();

            // Get the Quick Launch navigation node collection.
            // this.quickLaunchNodeCollection = web.get_navigation().get_quickLaunch();
            
            // Get the Top Navigation navigation node collection.
			this.navigationNodeCollection = web.get_navigation().get_topNavigationBar();

			for (var i = 0; i < navArray.length; i++) {
				var navObject = navArray[i];
				var navTitle = navObject.title;
				var navUrl = navObject.url;
				var navIsExternal = navObject.isExternal;

				// Set properties for a new navigation node.
				this.nnci = new SP.NavigationNodeCreationInformation();
				nnci.set_title(navTitle);
				nnci.set_url(navUrl);
				nnci.set_isExternal(navIsExternal);
            
				// Create node as the last node in the collection.
				nnci.set_asLastNode(true);
				this.navigationNodeCollection.add(nnci);
			}

			clientContext.load(this.navigationNodeCollection);
			clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
		}
	}
	
    function runCode() {
		addNavigationNodes();
    }

    function onQuerySucceeded() {
        alert("Nodes are added to the navigation.");
    }

    function onQueryFailed(sender, args) {
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
    }

</script>

<input id="Button1" type="button" value="Set Navigation" onclick="runCode()" />
	
<br />
<div style="marginTop:20px;">&nbsp;</div>

<input id="Button2" type="button" value="Check Navigation Array" onclick="checkArray()" />

Take the script and save it as a file. Copy this file to the SiteAssets library in your SharePoint site. Create a new page and add a Content Editor webpart on the page. In the properties of the webpart enter the complete url to the script file you saved in the SiteAssets library.

Advertisements