Original article published on Thu, May 10 2012

The Grid User Post blog series exposes some of the best content from The Grid to the entire Office 365 community. We are excited to feature our latest Grid User post from Jethro Seghers. Jethro uses his extensive technical knowledge of Office 365 to share insights into how to customize breadcrumbs in SharePoint Online. 

Written by 

​In SharePoint 2010/Online we don't have our breadcrumbs anymore. Or do we? If we look closely we see that the breadcrumbs are still available but in a different way:

 



But this not how we are used to deal with breadcrumbs. Breadcrumbs are on a page and look like this:

Now how do we get from picture 1 to picture 2? Well we use the SiteMapPath of SharePoint, put this in your masterpage.

<asp:SiteMapPath runat="server"        
       SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider"        
       RenderCurrentNodeAsLink="false"        
       NodeStyle-CssClass="BreadCrumb"        
       CurrentNodeStyle-CssClass="BreadCrumbCurrent"        
       RootNodeStyle-CssClass="BreadCrumbRoot"        
       HideInteriorRootNodes="true"        
       SkipLinkText=""/></div>

 

Now we need to define our css entries: ​BreadCrumb, BreadCrumbCurrent, BreadRoot

 

<style>
/* Breadcrumb styles */
 
.BreadCrumb{    
   font-family: Arial, Segoe UI, Verdana, sans-serif;     
   color: #003F50;    
   clear:both;  
   font-size:9pt;    
   padding-left:7px;    
   padding-bottom:2px;    
   padding-top:4px;    
   margin-bottom:4px;
}
 
.BreadCrumb a,
.BreadCrumb:active,
.BreadCrumb a:active
{   
   padding-left:0px;    
   padding-right: 0px;    
   text-decoration:none;    
   color: #003F50;
}
 
.SolidBreadCrumb a:hover{   
   text-decoration:underline;
}
 
.BreadCrumbCurrent{    
   font-weight:bold; 
}

</style>
 
Are you interested in contributing to The Grid? Click here to apply.
 

Audience:

 Office 365 for professionals and small businesses
 Office 365 for enterprises

This is a localized blog post. Please find the original article at Breadcrumbs in SharePoint Online - Grid User Post