The Breadcrumb in SharePoint 2010

The breadcrumb in SharePoint is useful just like the other navigation elements like the global navigation. In SharePoint 2010 we have the PopoutMenu control which can be visible if you click at the folder icon in the ribbon. That’s cool, but if you want to display the breadcrumb as a part of every pages without the need to activate it, it just to add a ASP:SiteMapPath control onto your custom masterpage.

SiteMap

There’s no limit when it comes to style the breadcrumb, you can have a custom background and an image that separates the nodes if you like to. In my example I have placed the following code just above the ContentPlaceHolder ‘PlaceHolderMain’ tag in my custom masterpage.

<div class="BreadCrumbWrap s4-notdlg">
<asp:SiteMapPath runat="server" SiteMapProvider="SPContentMapProvider" id="ContentMap"	CssClass="BreadCrumbStyle" PathSeparator="&gt;">
<CurrentNodeStyle CssClass="BreadCurrentNode" />
<PathSeparatorStyle CssClass="BreadPathSeparator" />	
</asp:SiteMapPath>
</div>

Add the following CSS classes to your custom CSS file, referenced from the custom masterpage.

CSS

.BreadCrumbWrap {
margin-top:10px;
}
.BreadCrumbStyle {
padding-left:15px;
font-size:10px;border-bottom:1px #ebebeb dotted;	
padding-bottom:5px;
}
.BreadCrumbStyle a:link, .BreadCrumbStyle a:visited {
color:#3b4f65;
}
.BreadCrumbStyle a:hover{
color:#0072bc; text-decoration:underline
}
.BreadCurrentNode {color:#0072bc}
.BreadPathSeparator{
color:#ccc; padding:0px 8px 0px 8px;
}

/ Christian

Advertisement