Ram Prasad Meenavalli

Adding BreadCrumb to a SharePoint Page

Published on 28-Nov-2014 | Comments

Breadcrumb navigation on landing pages of websites is very useful for navigating within the site. For SharePoint sites this can be easily achieved using the SiteMapPath control. Below is a sample BreadCrumb which I added to my SharePoint 2013 master page

Add the below control snippet within your SharePoint master page to display the breadcrumb.

<!--CS: Start Create Snippets From Custom ASP.NET Markup Snippet--> <!--SPM:<asp:SiteMapPath ID="SiteMapPath1" runat="server" SiteMapProviders="SPSiteMapProvider,SPXmlContentMapProvider" RenderCurrentNodeAsLink="false" NodeStyle-CssClass="breadcrumbNode" CurrentNodeStyle-CssClass="breadcrumbCurrentNode" RootNodeStyle-CssClass="breadcrumbRootNode" HideInteriorRootNodes="true" SkipLinkText=""/>--> <!--CE: End Create Snippets From Custom ASP.NET Markup Snippet-->

The UI of this breadcrumb can be completely customized using CSS. Set the appropriate CSS classes for CurrentNodeStyle, RootNodeStyle, NodeStyle properties of the SiteMapPath control, and define the CSS definitions for each type of the node.


View Ram Prasad Meenavalli's LinkedIn profile

SharePoint Technology Evangelist