Author: Tobias Zimmergren
http://www.zimmergren.net | http://www.tozit.com | @zimmergren

Introduction

In one of my previous articles where we investigated some of the new and awesome delegate controls in SharePoint 2013. It walks you through some of the interesting DelegateControl additions that I was playing around with. On top of that I got a comment about how you could extend it further by adding the current site title in the Suite bar:

[

Sure enough, I took a dive into the Seattle.master to take a look at how the title is rendered and found the control called SPTitleBreadcrumb. This is the control that is responsible for rendering the default out of the box title in a normal SharePoint team site like this:

[

So to follow the question through and provide an answer to get you started, we’ll take a quick look on how we can build further on our old sample from the previous blog post and add the site title (including or excluding breadcrumb-functionality) to the Suite bar.

Investigating the out of the box Seattle.master

In the OOTB Seattle.master, the title is rendered using the following code snippet:

[ ](javascript:;) _spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");

What we can see in this file is that there’s a lot of action going on to simply render the title (or title + breadcrumb). You can play around with this in tons of ways, both server-side and client side. In this article we’ll take a look at how we can extend the Suite bar delegate control from my previous article in order to – using server side code – modify the title and breadcrumb and move it around a bit.

Should you want to get the title using jQuery or client side object models, that works fine too. But we can save that for another post.

Adding the Title Breadcrumb to the Suite bar

I’m going to make this short and easy. The very first thing you should do is head on over to my previous article “Some new DelegateControl additions to the SharePoint 2013 master pages” and take a look at the “SuiteBarBrandingDelegate Delegate Control” section and make sure you’ve got that covered.

Once you’ve setup like that, here’s some simple additional tweaks you can add to your Delegate Control in order for the breadcrumb to be displayed in the top row of SharePoint. Modify the content of the “SuiteBarBrandingDelegate.ascx.cx” (the file in my previous sample is named like that, in your case it may differ) to now look something like this:

protected void Page*Load(object sender, EventArgs e) { // Register any custom CSS we may need to inject, unless we've added it previously through the masterpage or another delegate control... Controls.Add(new CssRegistration { Name = "/layouts/15/Zimmergren.DelegateControls/Styles.css", ID = "CssRegSuiteBarBrandingDelegate", After = "corev5.css" }); BrandingTextControl.Controls.Add(new Literal { Text = string.Format("", SPContext.Current.Site.Url, "/*layouts/15/images/Zimmergren.DelegateControls/tozit36light.png", SPContext.Current.Site.RootWeb.Title) }); // Create a new Title Breadcrumb Control SPTitleBreadcrumb titleBc = new SPTitleBreadcrumb(); titleBc.RenderCurrentNodeAsLink = true; titleBc.SiteMapProvider = "SPContentMapProvider"; titleBc.CentralAdminSiteMapProvider = "SPXmlAdminContentMapProvider"; titleBc.CssClass = "suitebar-titlebreadcrumb"; titleBc.DefaultParentLevelsDisplayed = 5; // Add the Title Breadcrumb Control BrandingTextControl.Controls.Add(titleBc); }

As an indication, the end-result might look something like this when you’re done. What we’ve done is simply copied the logic from the Seattle.master into the code behind file of our delegate control and set the “DefaultParentLevelsDisplayed” to a higher number than 0 so it’ll render the actual breadcrumb. By setting this value to 0, only the title will be displayed.

[

Then if you want to hide the default title, you can do that by using this small CSS snippet:

pageTitle { display: none; }

And it’s gone:

[

From there you should be able to take it onwards and upwards in term of the styling. I haven’t really put any effort into making it pretty here :-)

Summary

With these small additions and changes to my original code samples you can make the title bar, including or excluding the breadcrumb, appear in the top bar instead of in the default title-area.

Additional important comments:

You may need to consider ensuring that the Site Map datasource is available on every page, including system pages for example. If it isn’t or you land on a page that don’t want to render your breadcrumb/title, it may not be able to properly render your navigation as you would expect it to. However that’s something to look into further from that point.

For example, by default the “Site Content” link will not render the full breadcrumb properly, but rather just say “Home”. In order to fix smaller issues like that, we can further extend the code logic a few lines and take care of those bits.

My recommendation:

Always make sure you consider the approach you take for any type of customization and development. For this specific case, we’ve already used some code-behind to display our logo in the top left corner, so we’ve just built some additional sample code on top of that to render the breadcrumbs. However should we only want to do that and not move further onwards with the logic from here – I would most likely suggest you do this using jQuery/CSOM instead to be “Office 365 compliant” and keeping your customizations to a minimum.

Hope you enjoyed this small tweak. And keep in mind: Recommendations going forward (however hard it’ll be to conform to them) are to keep customizations to a minimum!

Cheers, Tob.