This post is going to cover how to configure the global navigation bar in SharePoint 2013 using Managed Navigation, as well as provide some tips and lessons learned with rendering the global navigation using new Managed Navigation in a custom master page. If you want the full details of Managed Navigation, check this article on Technet.

Setting up Managed Navigation

First, I’ll start with the Managed Navigation settings. I have found this extremely useful and I much prefer to manage the navigation use the term store than the traditional navigation tools. It is “possible“ to create a cross-site collection (or even web application) navigation using the Metadata Navigation tools, but you do have to do some additional work for that.

To get started, just head to the site settings page for your site collection and click Term Store Management under the Site Administration section. In the term store, click on the right edge of the Navigation group and select New Term Set:

Name your term set, then click the Intended Use tab, check the box for “Use this Term Set for Site Navigation” and press Save.

Click the right side of your term set and select Create Term.

Create all the terms for your navigation structure, then click the Navigation tab for a term. For this example, I am going to manually specify the destination URL, but you could easily use the Term-Driven navigation with friendly URLs if that meets your needs.

I have now built out my navigation structure:

Now that I have my navigation structure built, I can return to the site settings and set this as the navigation for my site. To do that, I’ll head to Site Settings, then click Navigation under the Look and Feel section. From the Global Navigation section, select Managed Navigation. A new section will appear on the page where I can select my term set that we created above. I’ll expand the Navigation group, then select my “Navigation Set 3” term set. Then, just head to the bottom and click OK.

So, now when we return to our site, we see all of our terms rendered as navigation items.

Using Managed Navigation in a Custom Master Page

Creating custom master pages is so much easier in SharePoint 2013 than it has been in previous versions, but it still isn’t quite perfect. For example, if you grab the Top Navigation snippet from the Design Manager for your master page, your Managed Navigation will not render correctly. This is an example master page with the Managed Navigation turned on, and the default top navigation snippet:

Pretty terrible right? It doesn’t render the drop down items at all. They are all rendered inline. You could obviously do your best to to apply JavaScript and/or CSS to get the drop-downs to function again, but why go through all that trouble when SharePoint should do that for you automatically. 

So, the easiest way around all this trouble is to grab the code that renders the top navigation from the HTML Seattle master page and paste that into your HTML master page. Here  is the code that is rendering the navigation in the Seattle master page for your copy/paste convenience.

   1:  <!--SPM:<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline" runat="server">-->

   2:      <!--SPM:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->

   3:                       <!--SPM:<Template_Controls>-->

   4:                                       <!--SPM:<asp:SiteMapDataSource 

   5:                  ShowStartingNode="False"

   6:                  SiteMapProvider="SPNavigationProvider" 

   7:                  id="topSiteMap" 

   8:                  runat="server"

   9:                  StartingNodeUrl="sid:1002"/>-->

  10:          <!--SPM:</Template_Controls>-->

  11:      <!--SPM:</SharePoint:DelegateControl>-->

  12:      <a name="startNavigation"></a>

  13:      <!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">-->

  14:          <!--SPM:<SharePoint:AspMenu 

  15:              ID="TopNavigationMenu" 

  16:              Runat="server" 

  17:              EnableViewState="false"

  18:              DataSourceID="topSiteMap"

  19:              AccessKey="<%$Resources:wss,navigation_accesskey%>"

  20:              UseSimpleRendering="true"

  21:              UseSeparateCss="false"

  22:              Orientation="Horizontal"

  23:              StaticDisplayLevels="2"

  24:              AdjustForShowStartingNode="true"

  25:              MaximumDynamicDisplayLevels="2"

  26:              SkipLinkText=""/>-->

  27:                <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Default Publishing Site" href="#" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Default Publishing Site</span></span></a></li></ul></div><!--PE: End of READ-ONLY PREVIEW-->

  28:      <!--SPM:</asp:ContentPlaceHolder>-->

  29:  <!--SPM:</SharePoint:AjaxDelta>—>

Once we add that to our HTML master page, the navigation magically looks like this:

Just by grabbing a different snippet we saved ourselves all the trouble of building our own drop-down and fly-out navigation. If you need more fly-out levels, you can just update line 25 from the code above. 

Stay tuned for a future post to turn the navigation item above into this with some custom CSS branding:

If you have any questions regarding this post or C5 Insight's services and solutions, please contact us.