SharePoint Breadcrumbs – Sample of differences, chart of uses and resources

I don’t think I am alone when I say “I hate the page level breadcrumb in SharePoint”.  While dead useful for users, it becomes a bit nightmarish for devigners. For this post I am going to ignore the Global Breadcrumb that appears in the upper left of a SharePoint site by default, because honestly most people hide it and it doesn’t cause near the heartburn as the page level breadcrumb.

Some background….   the page level breadcrumb (from this point forward just called breadcrumb) is included on the master page.  It is wrapped in a content placeholder.  So the master page is providing the default content for that content placeholder.  Page layouts have the power to trump that default content and specify their own content for any content placeholder.  Including not specifying any content at all, which effectively wipes out whatever is in the master page and displays nothing on the screen.

Some of the default page layouts in a publishing site move or hide the breadcrumb.  What you set in your master page won’t necessarily be what you get as you move from page to page in your site.  You can avoid this completely by using your own master page and your own page layouts.   If you choose not to use only custom page layouts, you will probably need to tweak the OOTB page layouts to get the breadcrumb to show how you want it across the entire site.

You may be tempted to stick the breadcrumb code in the master page and not wrap a content placeholder around it.  I would recommend against this, as you are stopping the ability to hide the breadcrumb on choice pages, like the home page.

Here is a breakdown of what the OOTB page layouts do in regard to the breadcrumb. I color coded the rows to show which page layouts do the same thing/use the same code:

 

AdvancedSearchLayout.aspx Breaks the inheritance from the master page. Specifies unique code that does not include the breadcrumb.
ArticleLeft.aspx Breaks inheritance from the master page. Specifies breadcrumb code that includes a DIV tag with a class of “breadcrumb“.
ArticleLinks.aspx
ArticleRight.aspx
BlankWebPartPage.aspx
DefaultLayout.aspx Breaks the inheritance from the master page.  Does not specify any code in the breadcrumb content placeholder, thus blanking out the breadcrumb set in the master.  Sets up the breadcrumb in a table in the PlaceHolderMain content placeholder.  The table cell uses a CSS class of “ms-pagebreadcrumb“.
NewsHomeLayout.aspx
PageFromDocLayout.aspx Breaks inheritance from the master page. Specifies breadcrumb code that includes a DIV tag with a class of “breadcrumb“.
PageLayoutTemplate.aspx N/A  – This is used as the starting point to create new page layout files.
RedirectPageLayout.aspx N/A  – This is used to redirect pages.
ReportCenterLayout.aspx Breaks the inheritance from the master page.  Does not specify any code in the breadcrumb content placeholder, thus blanking out the breadcrumb set in the master.  Sets up the breadcrumb in a table in the PlaceHolderMain content placeholder.  The table cell uses a CSS class of “ms-pagebreadcrumb“.
SearchMain.aspx Breaks the inheritance from the master page. Specifies unique code that does not include the breadcrumb.
SearchResults.aspx
TabViewPageLayout.aspx Breaks inheritance from the master page. Specifies breadcrumb code that includes a DIV tag with a class of “breadcrumb“.
VariationRootPageLayout.aspx   N/A  – This is used when provisioning a site for variations. More info.
Welcomelayout2.aspx Breaks inheritance from the master page. Specifies breadcrumb code that includes a DIV tag with a class of “breadcrumb“.
WelcomeLinks.aspx Puts the breadcrumb code inside of the PlaceHolderMain content placeholder. Wraps the breadcrumb in a DIV tag with the CSS classes of “ms-pagebreadcrumb” and “removeMargins“. Note that it does not break inheritance for the breadcrumb content placeholder from the master page.
WelcomeSplash.aspx Breaks inheritance from the master page. Does not specify any code, thus blanking out the breadcrumb from the web page.
WelcomeTOC.aspx Puts the breadcrumb code inside of the PlaceHolderMain content placeholder. Wraps the breadcrumb in a DIV tag with the CSS classes of “ms-pagebreadcrumb” and “removeMargins“. Note that it does not break inheritance for the breadcrumb content placeholder from the master page.

As you can see, there is a lot of variety going on with the OOTB page layouts. It is possible to modify the styles used in the various breadcrumb instances to all look nearly alike, giving you a uniform look and feel for breadcrumbs across your site. You just need to specify the same styles for “ms-breadcrumb” and “breadcrumb“. Or you can choose to go in and alter the page layouts that you need to in order to create uniformity.   Either route, just test the dickens out of it to make sure no pages show up odd.

If you are working only with WSS sites, note that default.aspx (used for the home page) breaks the inheritance from the master page and does not specify any code, thus blanking out the breadcrumb from the web page. Most other ASPX files that WSS sites use do not specify anything, so they inherit the breadcrumb from the master.

The next challenge with the breadcrumb is the site map provider it uses.  There are several available in SharePoint, and two that are used predominantly for WSS and MOSS sites in the breadcrumb.   The problem is the WSS one is great for lists and libraries, and the MOSS one is great for publishing pages.  But they each are not great for the other.

Breadcrumb with site map provider best for WSS:
<asp:SiteMapPath SPContentMapProvider” id=”ContentMap” SkipLinkText=”” NodeStyle-CssClass=”ms-sitemapdirectional” runat=”server”/>

Breadcrumb with site map provider best for MOSS (publishing sites):
<asp:SiteMapPath ID=”siteMapPath” Runat=”server” CurrentNavSiteMapProviderNoEncode” RenderCurrentNodeAsLink=”false” CurrentNodeStyle-CssClass=”breadcrumbCurrent” NodeStyle-CssClass=”ms-sitemapdirectional”/>

The main issue with the WSS site map provider is it will show directories you don’t want it to (mainly the Pages library) in the breadcrumb, and on some pages it will show “.aspx” on the end of the page name. The MOSS site map provider is more graceful, it just doesn’t show the list or library name in the breadcrumb.

This image shows examples of both site map providers being used on the same pages and the differing results:  view image. Please note that for these samples, I directly added the breadcrumb code to the master page, outside of a content placeholder.  That is why it appears on all pages.

So which one should you use?  It really depends on the type of site(s) you are running and what you personally want to use. Luckily it doesn’t end there.  There are a host of resources for how to modify and use the breadcrumb:

Hope this helps!

8 thoughts on “SharePoint Breadcrumbs – Sample of differences, chart of uses and resources”

  1. I just add the following javascript to my master page to remove the Pages link at runtime.. <script type=”text/javascript” language=javascript> var breadCrumbs = document.getElementById(‘ctl00_PlaceHolderTitleBreadcrumb_ContentMap’) if (breadCrumbs != null) { if (breadCrumbs.childNodes.length >= 3) { if (breadCrumbs.childNodes[2].innerHTML.indexOf(‘Pages’) > 0) { breadCrumbs.childNodes[1].innerHTML = “”; breadCrumbs.childNodes[2].innerHTML = “”; } } } </script>

  2. Shameless plug – but here are some of my own posts about about breadcrumbs in SharePoint:http://www.novolocus.com/category/sharepoint/branding/breadcrumbs/I really don’t like the breadcrumbs in SharePoint – they’re confusing, and for the last 4 months my posts about they have consistently been some of my most viewed, so I guess I’m not the only one.Personally, I think that the global and page level breadcrumbs should all be part of one control (who ever heard of a site with two breadcrumbs?), and the page layouts should (almost entirely) leave the breadcrumbs alone!

  3. Thanks Heather, this is around the twentieth time that you have saved me.Anyways, I have a quick question. I had used the CurrentNavSiteMapProviderNoEncode provider, and any page would only show the root, so I switched and now every page is shown, which is what I want. I have created many document libraries (besides for pages) and have placed many pages pertaining to each folder. I also created a overall page that has a list of all documents inside that folder.What I would like to do is have that link in the breadcumbs that points to the Document library go to my overall page instead of the allitems.aspx page. For example, if my breadcrumbs look likeMyHome>News>SpanishArmadaDefeated.aspxI would like to be able to set the News link to go to a specific page in that folder, instead of the http://site/News/AllItems.aspx.(Like setting a default or index.html page to a document library.)Thanks

  4. Hi.I am currently working on a Publishing Site for a customer, and is trying to figure out how to use the “CurrentNavSiteMapProviderNoEncode” sitemap-provider in the breadcrumb.I understand that this is supposed to trim “Pages” and “.aspx” from the breadcrumb, and only display Site1 –> Site 1.1 –> MyPageTitleBut whenever I try this, the breadcrumb only displays the Site Title(s), and no page-title.Does anoyone have a clue on what’s happening here?Thanks

  5. Hello Heather, I have read ur scraps abt breadcrumb. I m currently facing a strange problem with sitemap.i have created a custom login page with masterpage,breadcrum abd sitemap. the problem is when it is called from SharePoint the tree view controls (which shud show my custom navigation) get overridden by default sitemap provider specifed in web.config of extranet site.Is there a resolution to this?

  6. I am trying to make a breadcrumb show up in my Site Pages. I am using my own master page and my own page templates. I added the following code to my page template to override what is in the master page, but the page itself does not show in the breadcrumb. I noticed that if I manually create a new page based on ArticleLeft.aspx template, that page shows in the breadcrumb.What am I missing? Do I need to modify layouts.sitemap?<asp:Content ID=”Content1″ ContentPlaceHolderId=”PlaceHolderTitleBreadcrumb” runat=”server”> <div class=”breadcrumb”> <asp:SiteMapPath ID=”siteMapPath1″ Runat=”server” SiteMapProvider=”CurrentNavSiteMapProviderNoEncode” RenderCurrentNodeAsLink=”false” SkipLinkText=”” CurrentNodeStyle-CssClass=”breadcrumbCurrent” NodeStyle-CssClass=”ms-sitemapdirectional”/> </div></asp:Content>Thanks for any insight.

Comments are closed.