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!