Tuesday 12 March 2013

SharePoint 2013: Modify Navigation Settings with JavaScript and JSOM

One of the new additions in the JavaScript Client Object Model in SharePoint 2013 is the Publishing Navigation API. Some of the other additions are the UserProfile API and the Taxonomy API which I have already posted about.

In this post, let us look at how to use the Navigation API to change the navigation settings in a SharePoint 2013 site.

The main reason I want to do these posts is that currently there is still no API Reference available on MSDN for them. So this might be helpful to people looking to achieve the same functionality.

Here are the things which you can change from this Navigation API: 

1) You can change the Navigation settings of Publishing Sites as well as Non-Publishing sites.

2) You can set the Navigation Provider of the Current Navigation (Quick Launch) as well as the Global Navigation (Top Navigation Bar)

3) You can set the Navigation Provider out of any of these three:
     a. Inherit from Parent Site
     b. Managed Navigation (Taxonomy) The navigation items will be represented using a Managed Metadata term set.
     c. Structural Navigation: Display the navigation items below the current site.

4) Since all this code is pure JavaScript, you can add it in a variety of places like Apps, WebParts, Pages, Page Layouts, Web Templates etc.

So without much further ado, here is the code to manipulate the Navigation Settings:

First, lets make sure that we have loaded all the required SharePoint JavaScript files on the page. I like to use the jQuery.getScript() for this. The scripts we will need are sp.runtime.js,  sp.js and sp.publishing.js.
Here is a simple way by which I load all the necessary files:

Now, the actual code:

1) Set the (Current/Global) Navigation to either "Inherit from Parent" or "Structural Navigation":

2) Set the (Current/Global) Navigation dependent upon a Term Set in the Term Store:

Hope you find this helpful!


naveen said...

superb blog!!!
Thanks a lot for this...

Vardhaman Deshpande said...

Thanks naveen!

G said...


(Goog led me here as i was searching for ways to combat the SP13 Menu Monster)

I wish you had some screenshots so some of us non-java folks can see what it accomplishes.

Essentially unhappy with both managed meta data (as it does NOT security trim links) and may have to go with Traditional(Structural Menu) but that comes with non friendly links and other issues! Any suggestions?

Unknown said...

Thanks for the great post. I am trying to use this in a script editor web part. Although I see the message "Navigation Modification Successful," I do not see any change. Has anyone else run into this?

Unknown said...

Thanks Vardhaman,

Semi solved a problem I've been having. It's a shame it requires the page to be reloaded before the change takes effect.

Do you know if it's possible to change the top navigation using the REST API and if so how?


Vardhaman Deshpande said...

Hi Daniel, glad I could help.

At this time the REST API does not have support for Publishing and Managed Metadata/Taxonomy.

And as you can see from the code, the navigation is part of the publishing framework so I am afraid we cannot modify the navigation using the REST API.

shurick said...

Hello Vardhaman for sharing this. I am struggling with adding new navigation node while publishing infrastructure feature is enabled on site collection. Have you got an idea how to add new navigation node in case of publishing feature is enabled?

Pooja L said...

Hello Vardhaman. Great postand it helped me really well. But I have one more requirement. I need to set the simple link URL property of that term. Is that possible?