How to implement your custom breadcrumb navigation in SharePoint 2013

You can easily add breadcrumb navigation to your SharePoint 2013 pages by including the following tag (and setting the associated properties) called "SharePoint:ListSiteMapPath" in your master page. Please note that "SharePoint:ListSiteMapPath" has property “SiteMapProviders” which means we can specify more than one  provider object with one ListSiteMapPath control

 

Add following code snippet to your Master Page content place holder (you can chose any one depending on where you want to position the breadcrumb navigation on the page), for e.g. you can add to "PlaceHolderPageTitleInTitleArea"

 

<SharePoint:ListSiteMapPath

                runat="server"

                SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"

                RenderCurrentNodeAsLink="false"

                CssClass="my-breadcrumb"

                NodeStyle-CssClass="my-breadcrumbLink"

                CurrentNodeStyle-CssClass="my-breadcrumbLinkCurrent"

                RootNodeStyle-CssClass="my-breadcrumbLinkRoot"   

                HideInteriorRootNodes="true"

                SkipLinkText=""

                PathSeparator="" />

 

Please note that you have to define your own stylesheets to implement the class "my-breadcrumb", "my-breadcrumbLink", "my-breadcrumbLinkCurrent" and "my-breadcrumbLinkRoot"