Adding the Top-Level Site Title as a Navigational Aid

I’ve had an interesting requirement show up in the last few projects. All of them were public-facing, and they wanted to have a navigational aid above the quick launch to show the top-level site title. In other words, if the site is contained within a top-level site called “What We Know,” then above the quick launch that text will show up to aid give the user an additional aid in understanding what section of the site they are in.

I had no idea how to accomplish this so I reached out to my talented co-worker at Portal Solutions Carlos Fernandez. Carlos was able to give me an interesting and reusable solution I’d like to share. I take no credit for this code. I modified a part of the jQuery to pull in the anchor, but the approach and everything else was his work.

Including a Custom AspMenu

The first thing that has to happen is including another instance of the ASP.NET AspMenu control, but it uses a custom sitemap provider with custom attributes. Notice that it has a custom SiteMapProvider, and it has a StartingNodeOffset value. I also use the SharePoint:ProjectProperty control to give the title and URL of the root site; the reason for this is that the AspMenu renders nothing in the root site since it’s using an offset.

<span id="siteTitleValue" style="display:none;">
 <PublishingNavigation:PortalSiteMapDataSource
	ID="SiteTitleDS"
	runat="server"
	EnableViewState="false"
	SiteMapProvider="CombinedNavSiteMapProvider"
	StartFromCurrentNode="false"
	StartingNodeOffset="1"
	ShowStartingNode="true"
	TrimNonCurrentTypes="Heading">
  </PublishingNavigation:PortalSiteMapDataSource>
  <SharePoint:AspMenu
	ID="SiteTitleNav"
	runat="server"
	EnableViewState="false"
	DataSourceID="SiteTitleDS"
	UseSeparateCSS="false"
	UseSimpleRendering="true"
	Orientation="Vertical"
	StaticDisplayLevels="1"
	MaximumDynamicDisplayLevels="0"
        CssClass=""
	SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>">
  </SharePoint:AspMenu>
</span>
<span id="rootSiteTitle" style="display: none">
	<SharePoint:ProjectProperty Property="Title" runat="server" />
</span>
<span id="rootSiteUrl" style="display: none">
	<SharePoint:ProjectProperty Property="Url" runat="server" />
</span>

Using jQuery to Surface the Title

Using jQuery we can pull the top-level site title that the subsite is contained in and display it in custom HTML without all the HTML from the AspMenu. First is the HTML you used to embed it in the desired location. This uses a heading one which if you use that element elsewhere you might want to downgrade the header (as a semantic best practice you keep a single h1).

<h1 class="siteTitleDisplay s4-notdlg"></h1>

Here is one example where you don’t need the title to be an anchor. Notice how the PrepareDisplayValue function deals with the root site, because as mentioned above the menu doesn’t render anything for the root site.

jQuery(document).ready(function ($) {
var titleText = $.trim( $("#siteTitleValue .menu-item-text").text() );
$(".siteTitleDisplay").html(PrepareDisplayValue(titleText));
function PrepareDisplayValue(titleText) {
	if (titleText.length == 0) {
		var titleText = $("#rootSiteTitle").text();
			return titleText;
		}
	else {
		return titleText;
	}
}
});

If you want to include the anchor to the top-level site you can use the following jQuery snippet.

jQuery(document).ready(function ($) {
var titleText = $.trim( $("#siteTitleValue .menu-item-text").text() );
var titleURL = $("#siteTitleValue a.menu-item").attr("href");
$(".siteTitleDisplay").append("<a href='" + PrepareUrlValue(titleURL) + "'>" + PrepareDisplayValue(titleText) + "</a>");
function PrepareDisplayValue(titleText) {
	if (titleText.length == 0) {
		var titleText = $("#rootSiteTitle").text();
		return titleText;
	}
	else {
		return titleText;
	}
}
function PrepareUrlValue(titleURL) {
	 if (titleURL == undefined) {
		var titleURL= $("#rootSiteUrl").text();
		return titleURL;
	}
	else {
		return titleURL;
	}
}
});