Adding BreadCrumb to a SharePoint Page

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.