Breadcrumbs in SharePoint Online - Grid User Post
Original article published on Thu, May 10 2012
The Grid User Post blog seriesexposes some of the best content from The Grid to the entire Office 365 community. We are excited to feature ourlatest 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 Jethro SEGHERS
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 toThe Grid ? Click here to apply .
Audience:
This is a localized blog post. Please find the original article at Breadcrumbs in SharePoint Online - Grid User Post