In SharePoint 2010 there are a lot of times where you do not want to display the site collection root sites to users in navigation or in the bread crumb. There are many ways to achieve the task of hiding the root node in the bread crumb but in my opinion this gets you only half way to where you want to be. Most solutions you will find only hide the root node and leave the Path Separator displayed in the bread crumb. Whether this is the default > or a custom styled image who wants that to be displayed as the first level of a breadcrumb? Not my customers that's for sure.
So how to not only hide the root node but the separator as well? Well that's where jQuery comes to save the day. The path separator element has no ID and no style attributes applied which has to contribute to the lack of solutions on the web. These problems are areas that jQuery excels in. By being able to select any element from the DOM jQuery really flexes its muscles in these type of scenarios. Well long story short I have included the jQuery script and HTML used to hide the root node and separator from the SharePoint 2010 breadcrumb. You can add this to the master page along with references to the jQuery libraries and let the magic happen.
<asp:ContentPlaceHolder id="PlaceHolderBreadcrumb" runat="server">
<div id="master-page-breadcrumb">
<asp:SiteMapPath
ID="contentNavigation"
runat="server"
SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"
RenderCurrentNodeAsLink="false"
NodeStyle-CssClass="breadcrumbNode"
CurrentNodeStyle-CssClass="breadcrumbCurrentNode"
RootNodeStyle-CssClass="breadcrumbRootNode"
HideInteriorRootNodes="false"
SkipLinkText="">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>
</div>
</asp:ContentPlaceHolder>
<script>
$(document).ready(function(){
var rootNode = $("span[id$=contentNavigation] > span:eq(0)");
if (rootNode.attr("class") == "breadcrumbRootNode")
{
rootNode.hide();
$(rootNode).next("span").css('display', 'none');
}
});
</script>
