The breadcrumb in SharePoint is out of the box is quite invisible and takes not always the place it could have. As you know, the breadcrumb is meant to be a secondary global navigation, and if you have a deep and multilevel site structure and a large amount of sites and page the breadcrumb could really be helpful for the users.

So If you like to make it a bit more visible, let’s give it some graphics with a repeating background, separators and an end / start image.

BreadCrumb

To the point, how to do this in SharePoint?
Well I had first to say that the breadcrumb control in SharePoint could be a bit tricky to deal with, because it´s not only one breadcrumb around. The Master page has a control, you have to delegate the control in the page layouts and all the OOTB site definitions have their ways to handle the control. To make this work the same way on the site collection at every pages, from a page in a site with the publishing feature enabled, to a blog site and down to an view page for a library; I leave this out for you to investigate. Besides of all this, the site map have several properties with different kinds of behaviors and several site map providers for you to consider.

To get the repeating background it´s just to set a class to the asp:SiteMapPath, and to get the arrows you can use the PathSeparatorTemplate. To this I have an start and an end image.

Look for this in the master:
   asp:ContentPlaceHolder
and for this in the page layout and in the site defintions:
   asp:Content ContentPlaceHolderId=”PlaceHolderTitleBreadcrumb”   

    

Examle in a custom site defintion built on the team site

Example in a listview


Example in a Page

The SiteMapPath control


<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">	
<div class="BreadCrumbStart"></div>
<div class="BreadCrumbWrapper">	
<asp:SiteMapPath ID="MySiteMap" runat="server" class="MySiteMap" RenderCurrentNodeAsLink="True">
  <RootNodeStyle CssClass="RootBCnode" />
  <CurrentNodeStyle CssClass="CurrentBCnode" />
  <PathSeparatorTemplate>
   <img src="/Style%20Library/Images/CustomImages/Spitter18.png" border="0" class="SplitterImage"/>
  </PathSeparatorTemplate>
</asp:SiteMapPath>
</div>	 
<div class="BreadCrumbEnd"></div>
</asp:ContentPlaceHolder>

 

CSS

.BreadCrumbWrapper {
 background-color:#fff;
 float:left;
 margin:0px;
 padding:0px;
}
.BreadCrumbStart {
 background-color:#fff;
 float:left;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbStart.png');
 background-repeat: no-repeat;
 width:28px;
 height:26px;
 margin-top:0px;
 padding:0px;
}
.BreadCrumbEnd {
 background-color:#fff;
 float:left;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbEnd.png');
 background-repeat: no-repeat;
 width:20px;
 height:26px;
 margin-top:0px;
 padding:0px;
}
.RootBCnode a:link, a:visited{
 color:#555
}
.CurrentBCnode a:link, a:visited {
 text-decoration:none;
 color:#333
}
.MySiteMap {
 font-family:Arial, Helvetica, sans-serif;
 background-image:url('/Style%20Library/Images/CustomImages/BreadCrumbBack.png');
 background-repeat: repeat-x;
 height:26px;
}
.MySiteMap SPAN {
 font-family:Verdana, "BitStream vera Sans", Helvetica, Sans-serif;
 font-size:10px;
 color:#382e1f;
 vertical-align:middle;
 text-align:center;
}
.SplitterImage {
 margin-top:3px
}

Read more about breadcrumbs in this article in Smashing Magazine. http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

Advertisements