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.