SP2013. Adding breadcrumbs

For some reason breadcrumbs are disabled in the default SharePoint master pages.  Luckily it is very easy to add them.

Add breadcrumb

Simply add this snippet to your master page or page layout

<!--MS:<asp:sitemappath runat="server" sitemapproviders="SPSiteMapProvider,SPXmlContentMapProvider" rendercurrentnodeaslink="false" hideinteriorrootnodes="true">-->
<!--ME:</asp:sitemappath>-->

And when loading your page again you should see something similar like this:
Crumb

Navigate up (breadcrumb fly-out)

If you are used to SP2010 or SP2007 you might also know the navigate up icon.  When you click it, a flyout appears with the breadcrumb

To add this one to your SP2013: edit the master page (or actually the html). Look for a div with the css class ‘ms-breadcrumb-top‘. In this div you find a SharePoint control called PopoutMenu.

Crumb2

For some reason this ‘PopoutMenu’ control has the  attribute ‘visible’ set to ‘false’. Remove the complete attribute or replace the visible=”false”  by Visible=”true”

The result will be an icon that when clicked results in a breadcrumb popout.

Crumb3

24 Comments

  1. Anand

    April 30, 2013

    Helped me. Thanks.

  2. ScotterBob

    June 6, 2013

    Where on the master page does this snippet need to be placed?

  3. JayrePoint

    June 19, 2013

    Hey, I’m in the SharePoint Designer and connected to the Page where I want to add the breadcrumb trail. When I enter the “master pages”-section I get different files like “defaultLayout.aspx”, “olso.master”, “welcomelyout2.aspx” etc. I dont know exactly where to do the changes since I cant find a file which is just named “master page” could you please advise me?
    Thanks!

  4. W0ut

    June 20, 2013

    @scotterBob It does not matter where ever your design wants it to be. Make sure you place it within the tag and on a visible location on your page.

  5. W0ut

    June 20, 2013

    @JayrePoint . The master page defines the global look and feel for your SharePoint site. oslo.master is one of the default master pages installed by SharePoint. You can also create your own and select your new master page in the settings for your SharePoint site.

    I recommend reading into SharePoint master pages and page layouts. It’s too much to explain it all in this comment box.

  6. Ben

    June 20, 2013

    I’ve made the changes, but the icon does not appear. If I click where the icon should be the breadcrumb pops out though. Any ideas? I’m using managed navigation and have slightly customized the master page with a company logo.

  7. Vuthy Sok

    July 30, 2013

    Thanks for tutorial.

    Code below not working on SharePoint Foundation 2013
    <!–MS:–>
    <!–ME:–>

    Please help me

    • W0ut

      August 7, 2013

      Design Manager is only available in with SharePoint publishing. The publishing functionality is not available in the SharePoint Foundation version.

  8. Kristin

    August 15, 2013

    I am using the managed metadata navigation and have placed this code on my page layout. it works however it is only giving me the main page and current page and no pages in between. for example it is homepage > current page instead of homepage > projects > completed > current page. do you have any suggestions on what the problem could be. thanks in advance!

  9. Ben

    September 24, 2013

    Same problem as Kristin above. Any resolutions?

    • W0ut

      September 25, 2013

      Make sure the navigation on your subsites inherit from parent and the pages option is checked.

      An other weird behavior that I have encountered is that the settings on the navigation Settings page are correct but not displaying. Sometimes opening the navigation settings page and clicking on “Save” corrects the problem even if you didn’t make any changes on the settings page.

      Also try installing the March and April SharePoint 2013 CU updates. I had some (other) problems with navigation in the SP2013 RTM version.

      • Ben

        September 25, 2013

        I actually had some success using the following code:

        <!–MS:–>

        <!–ME:–>

        Doesn’t use SiteMapPath, but it functions exactly the way I want it.

      • Ben

        September 25, 2013

        Oops, ignore my last comment. Should have known markup would get stripped out of the comments.

        Basically, I used SharePoint:SPTitleBreadcrumb instead of asp:SiteMapPath. It functions almost identical to SiteMapPath (I believe it inherits all of the attributes, and adds a couple of it’s own). I set the Provider to GlobalNavigationTaxonomyProvider to pull the navigation from the Managed Metadata. And bam, it works exactly the way I want it to.

        Once I got that working, I added that functionality into my own user control, taking ideas from this blog post http://msreddysharepoint.blogspot.ca/2013/01/custom-breadcrumb-navigation-in.html. I added in a line saying ContentMap.Visible = (SiteMap.CurrentNode != SiteMap.RootNode), which hides the breadcrumb on the home page because I don’t need it there.

  10. kristin

    September 25, 2013

    @ben what was the code you used?

    • Ben

      September 25, 2013

      I have to strip out all the brackets, but hopefully this will help you :)

      MS: SharePoint:SPTitleBreadcrumb
      ID = “BreadCrumb”
      runat = “server”
      SiteMapProvider = “GlobalNavigationTaxonomyProvider”
      DefaultParentLevelsDisplayed = “3”
      ParentLevelsDisplayedInFolder = “3”
      RenderCurrentNodeAsLink = “false”
      NodeStyle-CssClass = “breadcrumbNode”
      CurrentNodeStyle-CssClass = “breadcrumbCurrentNode”
      RootNodeStyle-CssClass = “breadcrumbRootNode”
      PathSeparatorStyle-CssClass = “breadcrumbSeparator”

      ME: /SharePoint:SPTitleBreadcrumb

  11. Parag

    September 26, 2013

    thanks dude….awesome post!…worked like a charm!….
    Added the 2 lines in master page and Wallah!… :)

  12. DaHooka

    October 22, 2013

    Thanks !!!!

  13. Mon

    January 22, 2014

    Hi guys, for inline breadcrumbs, how can i make up to document library? like for example root > subsite > doclibrary? Thanks.

  14. tiffyholden

    January 30, 2014

    @ben @kristin..Hi i’m a newbie and I’m desperately trying to add breadcrumbs to my page layout. I’m having the same problem kristin was having with whole paths not showing up. I see your code with the stripped out brackets. Can you tell me where to add the brackets back in so i can add your code to my page layout?

  15. Akash Anand

    February 10, 2014

    Thanks it working…..!!

  16. Bryan Fox

    February 13, 2014

    We migrated from SP 2010 to 2013 and lost our Navigate Up feature. Users are not particularly happy. I was researching how to restore this and/or the Breadcrumb feature to give them some sort of navigation capability. I have read that custom navigation can be created, but I JUST want the existing hierarchy to conduct it at this point.

    One other site I found: http://www.manageprojectsonsharepoint.com/blog/2012/12/19/restore-navigate-up-on-sharepoint-2013/ gave me some simple instructions, but I encountered a glitch (which I have recorded in a comment, there), basically I can’t save my changes – to a COPY of seattle.master that I made with Designer.

    You have added an additional snippet edit recommendation, but I’m assuming that the METHOD to make these changes is the same. Our Systems Admin has confirmed that I am a Local Admin on this box both individually and as a member of the Admin security group.

    ANYWAY, I’m pretty green with this. I had no idea that something so fundamental would be lost.
    CAN YOU HELP ME NOT LOOK COMPLETELY INCAPABLE??

    Thanks
    Bryan

  17. Jill

    May 5, 2014

    I tried the original code and had the same problem as Kristin. I also tried Ben’s code, and it only showed the name of the main page while I was on the main page; when I drilled into a library, it didn’t show anything. Any suggestions?

Comments are closed. ×

Share Your Thoughts