Apr 16, 2012

A Consistent Breadcrumb Trail Experience

The breadcrumb trails in SharePoint 2010 can be a tricky thing for the designer creating a branding solution. I have written about this issue before, but have neglected to share my ultimate solution to it so far. A quick summary first:

In SharePoint 2010 the OOB Team site breadcrumb trail on the Browse Ribbon tab is formed by of two  separate PlaceHolders: PlaceHolderSiteName and PlaceHolderPageTitleInTitleArea. As for the Publishing sites, the OOB model is to only have the SiteName there. The full breadcrumb can of course be found in the "Folder" icon on the Ribbon. But as I have come to notice, customers are not happy about the lack of a proper always visible (except for the main page) breadcrumb trail. Maybe it is a matter of teaching new ways, but does the reason really matter? It is what people seem to like, and customers want, and it is doable. Really even in a quite simple way.

Combining the full breadcrumb (the same one used in MOSS 2007 too) and the PlaceHolderTitleInTitleArea, we can build a breadcrumb trail that is consistent througout the sites, independent of the site type. It provides a neat breadcrumb trail for Publiushing sites, but it also enables the additional menu functionality required for document libraries and lists. And the users never need to rethink their actions, breadcrumb is always in the same place.

This is how it works:

<asp:SiteMapPath
        id="ContentMap"
        SkipLinkText=""
        NodeStyle-CssClass="ms-sitemapdirectional"
        runat="server" RenderCurrentNodeAsLink="True" PathSeparator=" > " />
        <span> > </span>
        <asp:ContentPlaceHolder ID="PlaceHolderPageTitleInTitleArea" runat="server" />

The parameteres that you might want to change there are RenderCurrentNodeAsLink and the PathSeparator. Other possible parameters for the breadcrumb trail are (with example values):
  • RootNodeStyle-Font-Bold="true"
  • RootNodeStyle-Font-Names="Arial Black"
  • RootNodeStyle-Font-Italic="True"
  • RootNodeStyle-ForeColor="Green"
  • CurrentNodeStyle-ForeColor="Orange"
  • PathDirection="CurrentToRoot"
  • ShowToolTips="false"
But as you can see, most of the above are style-related, and thus better done by CSS than by using the parameters. 

The breadcrumb needs some styling anyway, in order to gain a consistent style. By default, it looks something like this:


But with some CSS styling, your breadcrumb might look e.g. like this:


The first part of the breadcrumb trail, the part that comes from the old SiteMapPath, you can manipulate simply by setting the style rules for links inside your breadcrumb container. The part that comes from the PlaceHolder uses these classes:
.ms-ltviewselectormenuheader .ms-viewselector a
and
.ms-ltviewselectormenuheader .ms-viewselectorhover a 
so you simply need to override their rules in your own CSS style sheet.

4 comments:

Anonymous said...

This sounds easy enough but I don't understand where I'm supposed to make this change?

SM said...

Hi,
This needs to be done in the master page used on the sites. There you can find the PlaceHolderPageTitleInTitleArea (use search to find it) combined to another placeholder in a similar manner as I here use the full path with this placeholder. In order to make this change you need to hide (place inside a hidden asp panel or div) the other placeholder and copy-paste the full breadcrumb trail from eg. this post to your master page.

I hope this helps you!

Unknown said...

Hi - This works great (once you add the missing " in the code!). However, I'm trying to extend it so that it also looks the same on the "My Site" pages, whether it my own "My Site" or someone else's "My Site" reached from, say, People Search. I've got My Site working with (a copy of) the same master page as my content site but when I add in the new code I get an error. I suspect its because the navigation for My Site pages includes the persons name inserted dynamically. NB The drop down navigation from the ribbon doesn't show anything either. Any thoughts? Andy

SM said...

Uups, thanks for spotting the missinf ", it is now fixed in the code :)

I have not tried this in My Sites, so unfortunately I have no tips from the top of my head. This kind of a scenario needs to be explored a bit further!