Creating a Two Tier Global Navigation

Two tier navigation is not a new concept and has been out for quite a long time. However SharePoint OOTB does not allow you to have a global navigation that spans multiple site collections.

Here are a few examples of a multi tier horizontal navigation.

Example 1: MSDN: Microsoft Developer Network

Example 2: Fed Ex

Example 3: Wall Street Journal
 

During a recent project I was given the task to create a global navigation that had two tiers like the examples above.

After some investigation my friend Sahil Malik had put together a great blog about creating a consistent navigation across site collections. (Thanks Buddy)

Well this is great and all but his code replaced the OOTB navigation with a custom one. So after some hard thinking I figured out that you could create your own control that drove the tier 1 global navigation (Across site collections) and a tier 2 local navigation (OOTB) that was security trimmed.

To get this to work you should use Shail's post as a guide for code but here are the basic steps:

• Go to: \inetpub\wwwroot\wss\VirtualDirectories\yourwebappname
• Create a back up of the web.config on each of the web applications that you want the two tier navigation
• Add the following to the custom web.config file

<add name="CustomXmlContentMapProvider" siteMapFile="_app_bin/mainMenu.sitemap" type="Microsoft.SharePoint.Navigation.SPXmlContentMapProvider, Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />

• Go to: \inetpub\wwwroot\wss\VirtualDirectories\yourwebappname\_app_bin
• Create a file called "mainMenu.sitemap" and add in your navigation simular to something like below

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
    <siteMapNode title="Tab 1 Home" url="/Pages/Default.aspx">
        <siteMapNode title="My Site" url="http://mysite.company.com/_layouts/mysite.aspx">
            <siteMapNode title="My Profile" url="http://mysite.company.com/person.aspx"/>
        </siteMapNode>
        <siteMapNode title="Collaboration" url="/Collaboration/Pages/Default.aspx"/>
        <siteMapNode title="News" url="/news/Pages/Default.aspx">
            <siteMapNode title="News 1" url="/news/news1/Pages/default.aspx"/>
            <siteMapNode title="News 2" url="/news/news2/Pages/default.aspx"/>
            <siteMapNode title="News 3" url="/news/news3/Pages/default.aspx"/>
        </siteMapNode>
    </siteMapNode>
</siteMap>

Finding out the hard way you cannot have any of the siteMap Node elements have the same url or title...

Please note that if you are placing this custom control on the mysite the relative links will have to be changed to absolute due to the fact that they reside in different web applications.

• Next you will have to add in the custom control to your masterpage. This can be a bit tricky.
• Copy the OOTB navigation control "<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">"
• Place this control in a <TR> tag right above the OOTB navigation control
• Like in Sahil's blog post rename the DataSourceID= from in the custom control from "topSiteMap" to "xmlSiteMap"
• You will also need to modify the content placeholder and menu ID's see highlighted items below:

Once you get it finally working your new navigation will have the following functions:

• Tier 1: Global Navigation
• Always Consistent
• Not Security Trimmed
• Manually configured on the server Via XML (I'm sure if you wanted to get tricky you could hook this up to custom list or something...)
• Globally across site collections, web applications and even external applications if you wanted (Basically anything)
• Tier 2: OOTB Local Navigation
• Changes based on site collection
• Security Trimmed
• Configured through the UI
• Only shows navigation within the site collection

So here is a screenshot of the custom two tier global navigation control:

Have fun customizing, and drop me a line if you have created something similar!