Tuesday, December 3, 2013

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"

Share This!

10 comments:

  1. This is working fine but i am facing some stupid issue while i apply provided css. When i navigate from parent site to any subsite then subsite title appears twice in the breadcrumb. For example my parent site is xyz and i navigate from xyz to my subsite abc then my breadcrumb is appearing like xyz > abc abc which should be xyz > abc. Please suggest me where i am making mistake and how to make it work fine.

    ReplyDelete
    Replies
    1. It might be because of another element on the master page. I would suggest to keep it may be move it another line.

      Delete
  2. Hi,

    I manage up to the stage that I can see the tree breadcrumb.

    I'm not sure were to add this css code:

    .ms-breadcrumb li,ul {


    display: inline; margin-left:-2.5em


    }


    on master page .html ?

    ReplyDelete
    Replies
    1. You can create a css file and add reference on the master page

      Delete
  3. I have added the script on seattle.html file from SPD 2013 in Advanced mode.
    But no change.

    Please suggest

    ReplyDelete
    Replies
    1. try checking in and publishing the master page

      Delete
  4. I am not able to see the breadcrumbs inline, have added the same CSS in style tag on the default master page in the HTML file. Please suggest

    ReplyDelete
    Replies
    1. try checking in and publishing the master page

      Delete