Breadcrumb navigation in SharePoint 2013

Here is a quick way to add bread crumb navigation to SharePoint 2013 . By default we can only see the current location . To get a navigation which drills down to parent site collection , i usually go with the following approach. 

ListSiteMapPath  creates a SiteMapPath control that renders as site map as a hierarchical set instead of nested un-ordered lists.

Both of the controls have the “SiteMapProvider” property. ListSiteMapPath has a property “SiteMapProviders” which means we can specify more than one  provider object with one ListSiteMapPath control. There are many providers for us to choose. Following articles describes it well http://www.ktskumar.com/blog/2008/04/sharepoint-navigation-providers-part-1/ :

• SPSiteMapProvider

• SPContentMapProvider

• SPXmlContentMapProvider

• CurrentNavSiteMapProvider

• CurrentNavSiteMapProviderNoEncode

• CombinedNavSiteMapProvider

• GlobalNavigation

• CurrentNavigation

• ExtendedSearchXmlContentMapProvider

• AdministrationQuickLaunchProvider

• SharedServicesQuickLaunchProvider

• PWASiteMapProvider

• GlobalNavSiteMapProvider

• SiteDirectoryCategoryProvider

• MySiteMapProvider

• MySiteLeftNavProvider

• MySiteSubNavProvider

• SPNavigationProvider

Add following code snippet to any content place holder in master page where we want breadcrumb navigation to appear, in my case i added it in "PlaceHolderPageTitleInTitleArea" .

<!--SPM:<SharePoint:ListSiteMapPath

                runat="server"

                SiteMapProviders="CurrentNavSiteMapProviderNoEncode"

                RenderCurrentNodeAsLink="false"

                PathSeparator=""

                CssClass="ms-breadcrumb"

                NodeStyle-CssClass="ms-breadcrumbNode"

                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"

                RootNodeStyle-CssClass="ms-breadcrumbRootNode"

                NodeImageOffsetX="0"

                NodeImageOffsetY="289"

                NodeImageWidth="16"

                NodeImageHeight="16"

                NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"

                RTLNodeImageOffsetX="0"

                RTLNodeImageOffsetY="312"

                RTLNodeImageWidth="16"

                RTLNodeImageHeight="16"

                RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=23"

                HideInteriorRootNodes="true"

                SkipLinkText=""/>-->

Adding above results in the following

Now, instead of i wanted as bread crumb separator. 

                NodeImageOffsetX="0"

                NodeImageOffsetY="289" change to 573

                NodeImageWidth="16" 

                NodeImageHeight="16" change to 10

                NodeImageUrl="/_layouts/15/images/fgimg.png?rev=23" Image used for separator

Making above changes did the trick for me . After above changes our navigation is supposed to look like this.

Adding the following css aligns breadcrumb items in a horizontal menu 

.ms-breadcrumb li,ul {

 display: inline;  margin-left:-2.5em   

}

.ms-breadcrumb > li:first-child  > span:first-child{

display:none

}

Above hides image separator at the beginning 

Following css can be overridden to change the way we want our navigation to appear

               CssClass="ms-breadcrumb"

                NodeStyle-CssClass="ms-breadcrumbNode"

                CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"

                RootNodeStyle-CssClass="ms-breadcrumbRootNode"