Redirect SharePoint Navigation

The SharePoint AspMenu navigation system and the SPNavigationProvider it users is sufficient for most purposes. However, there are a couple on instances when you might want to customize it. For instance, suppose you want a menu item in your intranet that points to an internet URL? Or suppose your intranet, due to content database size restrictions (should be more than 100 gigs) you are forced to split up a single-site collection web application into two web applications, but you will want to be able to address both of them with the same base URL.

Originally, the internet URL was accessed from a SharePoint page with Javascript code on it. The “Show Pages” option in the “Navigation” menu (note that you get this menu only when you have the Publishing feature turned on) gave us a link in AspMenu but there was a noticeable page refresh with this solution that was deemed unacceptable. When one particularly large subsite was split off from the original intranet web application (using Metalogix Site Migration Manager, which works well for moving parts of site collections around), it was moved to a first level subsite in a separate web application on port 83. This was more of a problem than the internet URL since users would have to be able to navigate back and forth from port 80 and port 83 seamlessly.

The solution was remarkably easy. As you know, SharePoint:AspMenu generates table HTML markup for the for the Top Navigation Menu

Here’s the markup for the redirect page:

<table class="ms-topNavFlyOuts zz1_TopNavigationMenu_7" cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td style="white-space:nowrap;width:100%;"><a class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6" href="/power/PSSites/Pages/Redirect.aspx" style="border-style:none;font-size:1em;">WESTERN NEW YORK</a></td>

</tr>

</table>

And here’s the markup for the subsite that was moved to a new web application. Note that we kept the empty stub of the sub-site that was split off so that the “Show subsite” option in the Navigation menu would still generate a link for it:

<table class="ms-topNavFlyOuts zz1_TopNavigationMenu_7" cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td style="white-space:nowrap;width:100%;"><a class="zz1_TopNavigationMenu_1 ms-topNavFlyOuts zz1_TopNavigationMenu_6" href="/power/PSSites/SENY/500mw/Pages/500MWHome.aspx" style="border-style:none;font-size:1em;">500MW</a></td>

</tr>

</table>

Using the JQuery $ alias to find the anchor tags, use the “attr” method to replace the href values:

<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/>

<script src="/Style Library/Scripts/jquery-1.3.2.min.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready(function() {

 var ctrlNiagra = $("a[innerHTML*=WESTERN NEW YORK]");

 ctrlNiagra.attr("href", "http://niagraserver/niagara");

 var ctrl500MW = "a[innerHTML*=500MW][href*=/power/PSSites/SENY/500mw/Pages/500MWHome.aspx]");

 ctrl500MW.attr("href", " http://sharepointserver.com:83/500mw");

 });

</script>

</BODY>

</HTML>

Now the two websites are transparently redirected to the desired URLs but you still have the issue of how to navigate back and forth between the main web application and “500mw” on port 83. This requires a change to the “500mw” master page. Fortunately it’s easy to choose a custom master page for the site through the site settings:

The only code change required on the 500MW.master is to comment out the <asp:SiteMapPath> tag within the “PlaceHolderGlobalNavigationSiteMap” content placeholder that generates the automatic bread crumb and replace it with some HTML which creates a custom bread crumb that leads back to the main intranet website on port 80:

asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server">

<span id="ctl00_GlobalNavigationSiteMap">

<span><a class="ms-sitemapdirectional" href="http://sharepointserver.com">Home</a></span><span> &gt; </span>

<span><a class="ms-sitemapdirectional" href="http://sharepointserver.com/power">Power Supply</a></span><span> &gt; </span>

<span><a class="ms-sitemapdirectional" href="http://sharepointserver.com/power/PSSites">Regions</a></span></span><span> &gt; </span>

<span><a class="ms-sitemapdirectional" href="/500MW">500MW</a></span>