{"id":706,"date":"2012-07-13T16:59:28","date_gmt":"2012-07-13T21:59:28","guid":{"rendered":"http:\/\/osric.com\/chris\/accidental-developer\/?p=706"},"modified":"2012-07-13T16:59:28","modified_gmt":"2012-07-13T21:59:28","slug":"sharepoint-breadcrumb-styles","status":"publish","type":"post","link":"https:\/\/osric.com\/chris\/accidental-developer\/2012\/07\/sharepoint-breadcrumb-styles\/","title":{"rendered":"SharePoint Breadcrumb Styles"},"content":{"rendered":"

SharePoint (and .NET) has a built-in SiteMapPath<\/a> control that is designed to display a breadcrumb trail.<\/p>\n

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:<\/p>\n

\"An<\/a>
An example of SharePoint breadcrumbs<\/figcaption><\/figure>\n

I didn’t like how much vertical space this style occupied. I wanted something a little more compact. But how to change the appearance?
\n
\nIt turns out, that element above is actually an example of the ListSiteMapPath<\/a>, a SharePoint control which inherits from the .NET SiteMapPath.<\/p>\n

How did I not realize that? When I looked at the code, it certainly looked like a SiteMapPath control:<\/p>\n

<asp:ContentPlaceHolder ID=\"PlaceHolderTitleBreadcrumb\" runat=\"server\" Visible=true>\r\n    <asp:SiteMapPath \r\n        SiteMapProvider=\"CurrentNavigation\" \r\n        ID=\"ContentMap\" \r\n        SkipLinkText=\"\"\r\n        CurrentNodeStyle-CssClass=\"breadcrumbCurrent\" \r\n        NodeStyle-CssClass=\"ms-sitemapdirectional\"\r\n        runat=\"server\" \/>\r\n<\/asp:ContentPlaceHolder><\/code><\/pre>\n
The key thing to note here is that the SiteMapPath<\/strong> is wrapped in a ContentPlaceHolder<\/strong>. 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
\nC:\\Program Files\\Common Files\\Microsoft Shared\\Web Server Extensions\\14\\TEMPLATE\\FEATURES\\PublishingLayouts\\PageLayouts<\/code><\/p>\n
That file contained a ContentPlaceHolder for PlaceHolderTitleBreadcrumb that was overriding the masterpage:<\/p>\n
<asp:Content ContentPlaceHolderId=\"PlaceHolderTitleBreadcrumb\" runat=\"server\">\r\n    <SharePointWebControls:VersionedPlaceHolder UIVersion=\"3\" runat=\"server\">\r\n        <ContentTemplate>\r\n            <asp:SiteMapPath \r\n                ID=\"siteMapPath\" \r\n                runat=\"server\" \r\n                SiteMapProvider=\"CurrentNavigation\" \r\n                RenderCurrentNodeAsLink=\"false\" \r\n                SkipLinkText=\"\" \r\n                CurrentNodeStyle-CssClass=\"current\" \r\n                NodeStyle-CssClass=\"ms-sitemapdirectional\"\/>\r\n        <\/ContentTemplate>\r\n    <\/SharePointWebControls:VersionedPlaceHolder>\r\n    <SharePointWebControls:UIVersionedContent UIVersion=\"4\" runat=\"server\">\r\n        <ContentTemplate>\r\n            <SharePointWebControls:ListSiteMapPath \r\n                runat=\"server\" \r\n                SiteMapProviders=\"CurrentNavigation\" \r\n                RenderCurrentNodeAsLink=\"false\" \r\n                PathSeparator=\"\" \r\n                CssClass=\"s4-breadcrumb\" \r\n                NodeStyle-CssClass=\"s4-breadcrumbNode\" \r\n                CurrentNodeStyle-CssClass=\"s4-breadcrumbCurrentNode\" \r\n                RootNodeStyle-CssClass=\"s4-breadcrumbRootNode\" \r\n                NodeImageOffsetX=0 \r\n                NodeImageOffsetY=353 \r\n                NodeImageWidth=16 \r\n                NodeImageHeight=16 \r\n                NodeImageUrl=\"\/_layouts\/images\/fgimg.png\" \r\n                HideInteriorRootNodes=\"true\" \r\n                SkipLinkText=\"\" \/>\r\n        <\/ContentTemplate>\r\n    <\/SharePointWebControls:UIVersionedContent>\r\n<\/asp:Content><\/code><\/pre>\n
Once I switched to a custom layout that did not include a ContentPlaceHoler for PlaceHolderTitleBreadcrumb, the defaults from the masterpage came through.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading SharePoint Breadcrumb Styles<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[180],"tags":[257,256,258,160,246],"class_list":["post-706","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2","tag-breadcrumb-trail","tag-breadcrumbs","tag-contentplaceholder","tag-sharepoint","tag-sharepoint2010"],"_links":{"self":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/comments?post=706"}],"version-history":[{"count":13,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/706\/revisions"}],"predecessor-version":[{"id":726,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/posts\/706\/revisions\/726"}],"wp:attachment":[{"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/media?parent=706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/categories?post=706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/osric.com\/chris\/accidental-developer\/wp-json\/wp\/v2\/tags?post=706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}