SharePoint Breadcrumb Styles

SharePoint (and .NET) has a built-in SiteMapPath control that is designed to display a breadcrumb trail.

There are a lot of options in terms of styling the breadcrumb trail, but it is not obvious how all of them are used. Even more confusing, though, is when you make a change the the styles but you don’t see that change reflected on your site. For example, on one site I am working on I saw breadcrumbs like these:

I didn’t like how much vertical space this style occupied. I wanted something a little more compact. But how to change the appearance?

It turns out, that element above is actually an example of the ListSiteMapPath, a SharePoint control which inherits from the .NET SiteMapPath.

How did I not realize that? When I looked at the code, it certainly looked like a SiteMapPath control:

<asp:ContentPlaceHolder ID="PlaceHolderTitleBreadcrumb" runat="server" Visible=true>
    <asp:SiteMapPath 
        SiteMapProvider="CurrentNavigation" 
        ID="ContentMap" 
        SkipLinkText=""
        CurrentNodeStyle-CssClass="breadcrumbCurrent" 
        NodeStyle-CssClass="ms-sitemapdirectional"
        runat="server" />
</asp:ContentPlaceHolder>

The key thing to note here is that the SiteMapPath is wrapped in a ContentPlaceHolder. Anything inside the ContentPlaceHolder is the default for the masterpage, but can be optionally overridden by the Page Layout. In this case, I was using one of the default Publishing page layouts found in
C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\FEATURES\PublishingLayouts\PageLayouts

That file contained a ContentPlaceHolder for PlaceHolderTitleBreadcrumb that was overriding the masterpage:

<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server">
    <SharePointWebControls:VersionedPlaceHolder UIVersion="3" runat="server">
        <ContentTemplate>
            <asp:SiteMapPath 
                ID="siteMapPath" 
                runat="server" 
                SiteMapProvider="CurrentNavigation" 
                RenderCurrentNodeAsLink="false" 
                SkipLinkText="" 
                CurrentNodeStyle-CssClass="current" 
                NodeStyle-CssClass="ms-sitemapdirectional"/>
        </ContentTemplate>
    </SharePointWebControls:VersionedPlaceHolder>
    <SharePointWebControls:UIVersionedContent UIVersion="4" runat="server">
        <ContentTemplate>
            <SharePointWebControls:ListSiteMapPath 
                runat="server" 
                SiteMapProviders="CurrentNavigation" 
                RenderCurrentNodeAsLink="false" 
                PathSeparator="" 
                CssClass="s4-breadcrumb" 
                NodeStyle-CssClass="s4-breadcrumbNode" 
                CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" 
                RootNodeStyle-CssClass="s4-breadcrumbRootNode" 
                NodeImageOffsetX=0 
                NodeImageOffsetY=353 
                NodeImageWidth=16 
                NodeImageHeight=16 
                NodeImageUrl="/_layouts/images/fgimg.png" 
                HideInteriorRootNodes="true" 
                SkipLinkText="" />
        </ContentTemplate>
    </SharePointWebControls:UIVersionedContent>
</asp:Content>

Once I switched to a custom layout that did not include a ContentPlaceHoler for PlaceHolderTitleBreadcrumb, the defaults from the masterpage came through.