So you’ve got you XML Navigation set up and ready to go on your SharePoint 2010 Site. You log into your site and now you noticed that the XML has no idea what site you are on and so the Top Navigation Tab isn’t selected (highlighted) when you click on a site and some of your end users use this as a queue to know what site they are on because it stands out a little more than the site title. The Steps below will get you your XML Navigation implemented onto the Master Page and all of the tools that will help you control the behavior of your navigation.

The first step is to open your SharePoint 2010 Master Page in a tool like SharePoint Designer or Visual Studio 2010. Now look for the asp content placeholder: <asp:ContentPlaceHolder
id=”PlaceHolderHorizontalNav” runat=”server”>

Now you will want to change the Data source from DataSourceID=”topSiteMap” to DataSourceID=”DemoXmlDataSource”.

Then we are going to change the SiteMapProvider from:

<SharePoint:DelegateControl runat="server"
ControlId="TopNavigationDataSource"
Id="topNavigationDelegate"><Template_Controls><asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider" id="topSiteMap"
runat="server" StartingNodeUrl="sid:1002"/></Template_Controls></SharePoint:DelegateControl>

To:

<DataBindings> <asp:MenuItemBinding Depth="0"
DataMember="siteMapNode" NavigateUrlField="url"
TextField="title" ToolTipField="description"
ValueField="title" />
< asp:MenuItemBinding Depth="1" DataMember="siteMapNode"
NavigateUrlField="url" TextField="title"
ToolTipField="description" ValueField="title" />
< asp:MenuItemBinding Depth="2" DataMember="siteMapNode"
NavigateUrlField="url" TextField="title"
ToolTipField="description" ValueField="title" />
< asp:MenuItemBinding Depth="3" DataMember="siteMapNode"
NavigateUrlField="url" TextField="title"
ToolTipField="description" ValueField="title" />
< /DataBindings> </SharePoint:AspMenu> <asp:XmlDataSource
DataFile="/_layouts/XMLNavigation/topnavigation.xml"
ID="DemoXmlDataSource" runat="server"
XPath="/*/*"/>

The above change has the SiteMapProvider switched from pointing to the SharePoint site to point to a folder location on my server that has my XML Navigation in it. My new location is:
/_layouts/XMLNavigation/topnavigation.xml

Here is a complete view of what the asp content placeholder should look like:

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu" Runat="server" EnableViewState="false"
DataSourceID="DemoXmlDataSource" AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1"
MaximumDynamicDisplayLevels="5"
DynamicHorizontalOffset="0"
SkipLinkText="" CssClass="s4-tn">
< DataBindings>
< asp:MenuItemBinding Depth="0"
DataMember="siteMapNode" NavigateUrlField="url"
TextField="title" ToolTipField="description"
ValueField="title" />
< asp:MenuItemBinding
Depth="1" DataMember="siteMapNode"
NavigateUrlField="url" TextField="title"
ToolTipField="description" ValueField="title" />
< asp:MenuItemBinding Depth="2" DataMember="siteMapNode" NavigateUrlField="url" TextField="title" ToolTipField="description" ValueField="title" />
<asp:MenuItemBinding Depth="3" DataMember="siteMapNode" NavigateUrlField="url"
TextField="title" ToolTipField="description" ValueField="title" />
< /DataBindings>
< /SharePoint:AspMenu>
< asp:XmlDataSource DataFile="/_layouts/XMLNavigation/topnavigation.xml"
ID="DemoXmlDataSource" runat="server" XPath="/*/*"/>
</asp:ContentPlaceHolder>

Now I will need to properly create my XML Navigation with URL’s that will allow me to highlight a tab when it has been selected on the SharePoint site. The main rule is that you will need to use the entire url for your site in order for this to work. So instead of having http://yoursharepointsite you will need to have http://yoursharepointsite/default.aspx or whatever the entire path is to the aspx file for your landing page is on your site. The limitation that should be noted is that the top nav items will only be highlight when you are on the root level of each site collection or sub-site.

Here is an example of what your XML file navigation should look like:

<?xml version="1.0" encoding="utf-8" ?><siteMap>
<siteMapNode url="http://yoursharepointsite/SitePages/Home.aspx"
title="Home" description="Home"/>
<siteMapNode url="http://yoursharepointsite/SearchCenter/Pages/default.aspx"
title="Search Center" description="Search Center"/>
<siteMapNode
url="http://yoursharepointsite/subsite1/SitePages/Home.aspx"
title="Subsite #1" description="Subsite #1"/>
<siteMapNode
url="http://yoursharepointsite/couseling/SitePages/Home.aspx"
title="Counseling" description="Counseling">
<siteMapNode url="http://yoursharepointsite/dropdown1"
title="Housing Services" description="Housing Services"/>
<siteMapNode url="http://yoursharepointsite/dropdown2"
title="Specialized Services" description="Specialized
Services" />
<siteMapNode url="http://yoursharepointsite/dropdown3"
title="Services" description="Services" />
</siteMapNode>
<siteMapNode url="http://yoursharepointsite/TestSite/SitePages/Home.aspx"
title="Test Site" description="Test Site"/>
<siteMapNode
url="http://yoursharepointsite/finalsite/SitePages/Home.aspx"
title="Another Test Site" description="Another Test
Site"/>
</siteMap>

Now we will need to reference and create some JQuery to allow for the magic to happen. We will be using jquery-1.6.1.js for this tutorial. So that file will need to be referenced in your masterpage to get the JQuery to work on the Top Navigation Highlighted selection.

For the JavaScript needed to make the Top Navigation stay selected when you are on the site you will need to create a JS file using the following code:

var TCSC = {};
TCSC.ShowMenuSelection = function () {
var url = location.href;
var url_parts = url.split('?');
var main_url = url_parts[0];
$('[href="' + main_url + '"]',
$('div.menu-horizontal')).addClass('selected');
};
$(function () {
TCSC.ShowMenuSelection();
});

Save the file as something like topnav.js. You can create this file in a program like notepad and then just save it with the .js file extension. The JavaScript above tells the tab to add the Selected class to the class id when you are landed on a page in the XML Navigation file.

Now we will reference your two JavaScript files in your SharePoint 2010 Master Page. Before the closing </head>tag put <script type="text/JavaScript"
src="/_layouts/jquery/jquery-1.6.1.js"></script> first and then below that add: <script type="text/JavaScript" src="/_layouts/jquery/topnav.js"></script>

Let me explain my file location that you see above. When I create a master page solution I put my JQuery files into a folder called jquery that will be deployed to the layouts directory on my server. I will be including a Master Page Solution at the end of this posting that you can deploy to your site and all of the files can be edited to your liking.

The XML Navigation created to use in this solution will be deployed to the directory: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\XMLNavigation on your server. There you can change and experiment with the URL’s on your site to create the selected tab. What you see below is the example XML Navigation file’s contents.

<?xml version="1.0" encoding="utf-8" ?><siteMap>
<siteMapNode url="http://yoursharepointsite/SitePages/Home.aspx"
title="Home" description="Home"/>
<siteMapNode url="http://yoursharepointsite/SearchCenter/Pages/default.aspx"
title="Search Center" description="Search Center"/>
<siteMapNode
url="http://yoursharepointsite/subsite1/SitePages/Home.aspx"
title="Subsite #1" description="Subsite #1"/>
<siteMapNode
url="http://yoursharepointsite/couseling/SitePages/Home.aspx"
title="Counseling" description="Counseling">
<siteMapNode url="http://yoursharepointsite/dropdown1"
title="Housing Services" description="Housing Services"
/>
<siteMapNode url="http://yoursharepointsite/dropdown2"
title="Specialized Services" description="Specialized
Services" />
<siteMapNode url="http://yoursharepointsite/dropdown3"
title="Services" description="Services" />
</siteMapNode>
<siteMapNode url="http://yoursharepointsite/TestSite/SitePages/Home.aspx"
title="Test Site" description="Test Site"/>
<siteMapNode
url="http://yoursharepointsite/finalsite/SitePages/Home.aspx"
title="Another Test Site" description="Another Test
Site"/>
</siteMap>

Part of this XML gives you the ability to have dropdown links as well. Located here in the code:

<siteMapNode
url="http://yoursharepointsite/couseling/SitePages/Home.aspx"
title="Counseling" description="Counseling">
<siteMapNode url="http://yoursharepointsite/dropdown1"
title="Housing Services" description="Housing Services"
/>
<siteMapNode url="http://yoursharepointsite/dropdown2"
title="Specialized Services" description="Specialized
Services" />
<siteMapNode url="http://yoursharepointsite/dropdown3"
title="Services" description="Services" />
</siteMapNode>

The Master Page will be called xmlnav.master and the server side copy will be located at:
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURE \XML.SharePoint2010.Masterpage\Masterpage

Also a virtual copy will appear in the _catalogs/masterpage folder on your Site Collection once you deploy and activate the Feature.

With a combination of having a full URL path for your links and some JavaScript you can now have the ability to highlight your tabs when using XML just like SharePoint 2010 Navigation does by default without XML.

If you are using the supplied WSP file you will have to manually update the XML file to have your website url’s for this Solution to work, but I wanted to supply this to help get you started.

Note: If your aren’t familiar with using XML within SharePoint, you must enable the XML Data Source to be “True” in your web.config file as shown below:
TypeName=”XmlDataSource” Safe=”True”