I mentioned that I had changed roles a while back and with that I get to work in some different areas and these areas have more of a development slant to them. One of my customers recently wanted to convert their Intranet portal into a more friendly Navigation experience on SharePoint 2013. They also want it to be responsive, but we’ll tackle that later.

So in my discussions with the customer we arrived at a decision that they would be using Managed Navigation and they wanted it to be in a tabbed format similar to this:

I won’t get into Managed Navigation here, but suffice it to say that it’s a feature that was added to SharePoint 2013 that uses the Managed Metadata Service and terms that you define to provide navigation items. It’s highly dynamic and easy to change, if needed. SharePoint creates a control and adds it to the default master pages so you don’t really have to do much, but they aren’t very attractive out of the box.

There are a ton of ways to do any one thing with software development – some more efficient or better coding practices than others, but still a wide variety…this is simply the way I picked.   I began by looking at Bootstrap as not only does it have easy to use classes right out of the gate for navigation (including tabs), it also makes responsive (the next thing we’d have to look at it) much easier as well. After searching around a bit for bootstrap and SharePoint I happen to stumble upon some code from a fella named Tom Daly. He had already tackled a good bit of what needed to be done and code-reuse is a popular topic today, right?

Installing the code as downloaded from GitHub, we get a look like this:

Obviously this is not the result that any of us wants to see so using Tom’s code as a base, I had to tweak a little bit of the javascript and some custom CSS to get the display that I wanted. The first thing that I wanted to do was to remove the out of the box Navigation using some custom CSS:

.ms-core-navigation, #DeltaPlaceHolderPageTitleInTitleArea, #DeltaTopNavigation {
visibility:hidden;
}

That, at least, allows us to only see one set of navigation elements (and the ones we want, I might add). Next was to begin changing the type of navigation from Tom’s code from dropdown classes to using tabs. There were actually a lot of steps to this and there is no way I can step by step go through Tom’s code and the changes I made in this blog post to explain what all happens. I *highly* encourage you to review the code in Tom’s solution to understand the steps and ask questions below. However, the important part is to know that using Tom’s code we make a call to the REST endpoint “/_api/navigation/menustate?mapprovidername=’GlobalNavigationSwitchableProvider’” and this returns an object containing the Navigation Nodes (all levels).

One of the key pieces in the code is some recursion that allows us to build the navigation menus and submenus with all of the appropriate classes. I added a section that defines the .hover() event for the tabs. Basically I am removing the ‘active’ class from all content elements and then setting the ‘active’ element on the one content for the tab being hovered over:

$(“.nav-tabs > li”).hover(function () {
$(“.nav-tabs > li”).removeClass(‘active’);
$(this).addClass(‘active’);

$(“.tab-pane”).removeClass(‘active’);
var id = “#” + $(this).attr(‘id’) + “_SubMenu”;
$(id).addClass(‘active’);
});

CSS and Javascript