Nick Hadlee's Blog on SharePoint and Other Occasional Rants…

Breadcrumbs in SharePoint seem to be a pet hate for many people, but they are a necessary evil as they provide a fundamental part of the SharePoint navigation. The stock standard SiteMapProvider SPContentMapProvider is good from within libraries and lists but is lousy for pages as described by Heather Solomon:

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.

So using the WSS breadcrumb we would get the following breadcrumb from within a library or list:

Site Name > Library or List Name > Folder Name

That is pretty useful for users, especially if they have a habit (I’m tempted to say bad habit!) of using folders to manage their content. The problem is what you see when viewing a page:

Site Name > Pages > PageName.aspx

What we really want to see is a very stripped down breadcrumb more like what the CurrentNavSiteMapProviderNoEncode provides:

Site Name

The best approach is to modify the relevant page layouts so we are using the CurrentNavSiteMapProviderNoEncode for our page level breadcrumbs. Then we have the SPContentMapProvider in the master page as the default breadcrumb provider and the nicer page level breadcrumb coming from CurrentNavSiteMapProviderNoEncode. The problem is what if we have lots of page layouts or even worse we don’t have any page layouts at our disposal – WSS or non publishing MOSS sites? Using a bit of jQuery we can mimic what the we could get with the CurrentNavSiteMapProviderNoEncode by using only the SPContentMapProvider breadcrumbs:

That might not be optimal jQuery (in fact I could almost guarantee its not so if anybody can suggest optimisations please let me know!) and this solution is not going to be very useful unless you can deploy it into your entire site via a web or site scoped feature. Jan Tielens provides a really good example on how to integrate jQuery into SharePoint using the AdditionalPageHead delegate control.

$(document).ready(function() {
	var pageIndex = -1;
	var offset = 2;
	var $spans = $("#ctl00_PlaceHolderTitleBreadcrumb_ContentMap > span");

	if($spans.eq($spans.length - 1).text().search(/\.aspx$/) > -1) {
		$spans.each(function(i) {
			if( $(this).text() == "Pages" ) {
				pageIndex = i;	
			}
		});	

		$spans.each(function(i) {
			if(i == (pageIndex - offset)) {
				$(this).addClass("ms-sitemapdirectional");
				var innerText = $(this).text();		
				$(this).empty();	
				$(this).text(innerText);
			} else if((pageIndex != -1) && (i > (pageIndex - offset))) {
				$(this).empty();
			}
		});
	}
});

Want to know more about jQuery? A simple google search on jQuery+SharePoint is a good start or take a look at what Jan Tielens or the guys and gals at End User SharePoint have got to say.