In SharePoint 2007 and 2010, if you wanted a neat hierarchy of publishing pages, you had two options. Either, you structured your SharePoint site so that you got the navigation you wanted, or you built custom navigation providers. Unfortunately, customers typically want everything to be ‘out of the box’, even if that means some absurd structures just to get the navigation right. Developing custom navigation providers is a really tough sell, but I’ve also seen site structures 7 levels deep to try to avoid this – and a 7 level deep site structure is a really bad idea.
SharePoint 2013 gives us a standard alternative to structural navigation. Instead, we can use ‘Managed Navigation’. This is a Managed Metadata termset that define’s our site’s hierarchy.
That’s great, but there are some problems with this still.
The main problem (that I recently encountered) was the fact that the left navigation will normally show the currently selected page in that hierarchy, the siblings of that page, and any children of any of those siblings. For example, here pages ‘B’ and ‘C’ are siblings of ‘A’:
Imagine if you’d 8 pages/siblings at the current level of the hierarchy, and each of those had 8 pages underneath – that’s 72 links that will be shown in the left navigation. It’s just not usable.
What you really want is to see the current page, it’s siblings, and it’s children (but not the children of siblings). And you want to do that with as little code as possible.
What I did was approach this with some JavaScript. I used a delegate control to add script tags for jQuery and my own code into the Additional Page Header. My own JavaScript code then does the following:
$(document).ready(function () {
var lNav = $("div.ms-core-listMenu-verticalBox > ul.ms-core-listMenu-root");
lNav.find("li.static > ul.static").hide();
lNav.find("li.selected > ul.static").show();
});
When the page is loaded, this hides all ‘children’ links in the left navigation, and then shows them again if they are children of the currently selected node. Thus, when you turn on the feature with the delegate control you get a page with a reasonable number of links in the left navigation:
Now this isn’t ideal – the links are still being rendered to the page – but it is quick, easy, and a light touch. It’s also easy to turn off and return to the standard functionality of the left navigation.