Let’s bring the breadcrumb back to SharePoint 2013!

sp2013By default SharePoint 2013 doesn’t have a breadcrumb (like the 2010 version used to have). This was a very helpful feature to navigate back in your site and some users really miss it.

This post was updated on 12th June 2014 to solve the missing icon issue reported by some users.

The good news is Microsoft didn’t remove it from SharePoint 2013, it’s just hidden in the Seattle master page.

To get it back working, you can follow these steps:

  1. Open your site with SharePoint designer
  2. Navigate to All Files -> _catalogs -> master page
  3. Edit the Seattle.master in advanced mode and copy all the code
  4. By default it’s not possible to edit the original master. To create a new one click on File -> Blank Mater Page
  5. Create new master page

  6. Check out the new master, edit it in advanced mode, delete all the existent code and paste the one from the original Seattle
  7. Search for
  8. Delete the CSS attribute
  9. Two lines bellow change the visible attribute of the SharePoint:PopoutMenu to true
  10. After editing your code it should look like this
  11. If you are using one of the themes from SharePoint your breadcrumb icon will not appear as it should, to get it back add the script below before the closing tag
  12. Save the modified master page, check it in and publish the major version
  13. Open your SharePoint Site, go to Settings -> Site Settings -> MasterPage under Look and Feel and select the new master page for the Site master and System master options
  14. Select master page

  15. You will see a new icon on the left side of the menu.
    Here’s your breadcrumb!
  16. SharePoint 2013 breadcrumb

Heads up!

If you are using the latest version of Bind Tuning themes you don’t have to do anything to get the breadcrumb back, it’s included by default

Bind Tuning breadcrumb

By | 2017-05-04T14:13:18+00:00 September 25th, 2013|Articles|59 Comments

About the Author:

Web developer focused on SharePoint branding, blogger, tech enthusiast. Traveling and sports are my addictions, knowledge and success are my daily motivations.

59 Comments

  1. allan November 11, 2013 at 5:19 am - Reply

    Good one!
    But you should pint out that this master page setting under look and feel is only available for Publishing site. For Team site no need and nowhere to do that. After checking in the master page it works. Thanks!

    • João Ferreira November 11, 2013 at 9:53 am - Reply

      Hi Allan,

      If you are not using SharePoint Foundation, you have the ability to get the master page option for all kind of sites including the team sites, the only thing you have to do is activate the publishing features.
      I’m glad that you manage to get this to work! :)

  2. Jed Elliott November 13, 2013 at 3:54 pm - Reply

    Is there a certain name you need to use in SharePoint Enterprise for this option to become available under the Master Page Dropdown?

    • João Ferreira November 14, 2013 at 4:32 pm - Reply

      Hi Jed,

      You need to activate the SharePoint publishing features, first at site collection level and then at site level. If your SharePoint version do not include the Publishing features you can set a new master page using SharePoint designer.

  3. Richard December 3, 2013 at 2:52 pm - Reply

    Hello João,
    I created publishing site collection, then newly created a master page and applied it in the top site of the site collection referring to your instruction. However, the breadcrumb is failed to be dispalyed in my home page yet. :(

    • João Ferreira December 6, 2013 at 11:30 am - Reply

      Hi Richard,

      Please make sure you have checked in the master page and published the major version.

  4. Matt January 28, 2014 at 11:39 pm - Reply

    I am really new to SharePoint, but how do you “publish the major version”. At step 10, I am not sure what to do. In SharePoint Designer, I can right-click over my new file and there are options for “Set as Default Master Page” and “Set as Custom Master Page”. Am I in the right neighborhood?

    • João Ferreira January 29, 2014 at 9:54 am - Reply

      Hi Matt,

      Yes you are in the right neighborhood, if you right-click over your file and then click over check in, a pop-up windows should appear with the publish major version option.

  5. tiffy123 January 30, 2014 at 6:05 pm - Reply

    how do i get the breadcrumbs to show up on page layouts and not the master page?

    • João Ferreira February 11, 2014 at 5:26 pm - Reply

      You can do this using a javascript.
      Add an empty div to your page layout, and then in the master page you can run a script that will get the code from the breadcrumb and will fill the empty div.
      Something like this:

      var breadcrumb = $(“.breadcrumbArea”).html(); // This is the breadcrumb code
      $(“#breadcrumb”).html(breadcrumb); // This is the empty div

  6. Mn Doc February 1, 2014 at 1:17 am - Reply

    When I tried this, I got Unknown server tag ‘wssucw:Welcome’ — has anyone encountered this?

    • João Ferreira February 11, 2014 at 5:23 pm - Reply

      Are you using SharePoint Foundation or SharePoint Server?

  7. cynthia duke February 5, 2014 at 3:08 pm - Reply

    This article is wonderful. It’s exactly what I need any already implementing. Thanks for providing!!!

  8. xuan February 7, 2014 at 5:51 pm - Reply

    can you do this with olso master page.
    Thanks

    Xuan

    • João Ferreira February 11, 2014 at 5:35 pm - Reply

      Hi Xuan,

      Yes it is possible however you need to add the the extra div to the master page with the code for the breadcrumb inside.
      You also have to remove this that is inside of

  9. staygreenacademy February 17, 2014 at 1:14 pm - Reply

    this article was informative.i liked it

  10. rozeena from sharepoint March 4, 2014 at 5:14 am - Reply

    this Article was very supportive for me.thanx it was knowledgeble.
    Rozeena

  11. Peter March 24, 2014 at 7:27 pm - Reply

    This works for me. However, if I change the look of the site, the icon becomes invisible. It is still there – if I click on the space where it is, the menu pops up – but the icon is invisible! Has anyone else experienced this?

    • João Ferreira March 25, 2014 at 12:10 pm - Reply

      Are using the default seattle master page?

      • Peter March 25, 2014 at 3:11 pm - Reply

        Yes. I tried both editing seattle.master directly (it allowed me to do this), and creating a copy as you suggested. I had the same result both ways.

        • John Burkholder April 7, 2014 at 7:00 pm - Reply

          Peter, you will need to remove the line

          ThemeKey=”v15breadcrumb”

          • Robert Walker July 2, 2014 at 1:28 pm

            That worked for me! Thanks John!

        • Jeffrey M May 21, 2014 at 6:06 pm - Reply

          I’m experiencing the same issue. It appears to me to only work 100% of the time on Publishing Portal site collections. If I turn on the features on a team site and then add a new Masterpage with the code suggested, it will not show the icon but the navigation works. What can be done to keep the folder image visible?

          • João Ferreira June 5, 2014 at 1:29 pm

            Hi Jeffrey,

            Please make sure that you are using the modified master page across all sites, and also check if the master page is checked in and published as a major version.

  12. Von April 1, 2014 at 3:10 am - Reply

    Is this application to SharePoint Online as well?
    Thanks.

  13. Ragnar Heil April 2, 2014 at 8:36 am - Reply

    Has anyone seen this issue? Navigation Level 2 is not visible anymore in this scenario:

    Level 1 (own Top Link Bar)
    Level 2 (Top Link Bar of parent)
    Level 3 (own Top Link Bar)

  14. Loola April 5, 2014 at 2:46 am - Reply

    I stayed with this article, I have been doing valuable insights here. thanks for sharing.

  15. JohnC April 15, 2014 at 7:55 pm - Reply

    Hi, I have the same problem as Peter, the icon does not display. The HTML is there, just the img tag src URL is not correct, it shows …spcommon-2D7B5F9E.themedpng but that files does not exist in /_themes/3/, rather it should be spcommon-B35BB0A9.themedpng. When I edit the img src URL to the file that does exist then the image appears. But in the master page it shows as IconUrl=”/_layouts/15/images/spcommon.png?rev=23″. Not sure how it morphs from there. Any thoughts?

    • João Ferreira June 5, 2014 at 1:44 pm - Reply

      I’ll inspect this issue, and if I find the solution I’ll provide the update.

  16. Jill May 2, 2014 at 3:00 pm - Reply

    I did this on a sub-site to test it and it worked great. Then I did it on the top-level site and something weird happened — the dropdown is there, but it’s invisible (i.e., if I click in the area where it should be, the dropdown appears, but you can’t see the little folder). Any ideas?

  17. David Infante May 2, 2014 at 5:31 pm - Reply

    I got it working but the icon is missing??? It took me a bit to figure out it was working because the icon is not there? lol any ideas?

    • João Ferreira June 5, 2014 at 1:40 pm - Reply

      Hi David,

      Are you using Office 365 or SharePoint?

      • VK June 10, 2014 at 1:32 pm - Reply

        I am using office 365 and i am getting the same issue. I have applied custom master page and changed the theme but the navigation icon is missing. But when i click that area breadcrumb pops up.

        • João Ferreira July 2, 2014 at 1:42 pm - Reply

          Hi,

          The article was updated to solve this issue, let me know if it works for you.

    • João Ferreira June 12, 2014 at 1:52 pm - Reply

      David,

      The article was updated to solve the issue with the missing icon

  18. […] By default SharePoint 2013 doesn’t have the 2010 breadcrumb. This was a very helpful feature to navigate back in your site and some users really miss it.  […]

    • Bahram February 11, 2015 at 8:43 pm - Reply

      Hi, I got it to work thanks but it is only displaying for sites and not for libraries or other location you go on the site. In 2010 the bread crumb shows you where you are but here I can only see sub sites and nothing else. How can I fix it?
      thanks,
      bahram

  19. vinay June 11, 2014 at 6:12 am - Reply

    I am getting the same problem, the icon is missing but navigation is there. it occurs when i change the theme from look and feel, it automatically changes my master page to seattle.master from my custom master. but when i apply my custom master page again the navigation comes out but icon is missing.

    • João Ferreira July 2, 2014 at 1:43 pm - Reply

      Hi Vinay,

      The article was updated to solve this issue, with the new version the icon should be visible.

  20. Huz June 26, 2014 at 4:07 am - Reply

    good article

  21. Amy R July 2, 2014 at 3:34 pm - Reply

    This worked great for me. Thanks!

  22. James October 16, 2014 at 4:36 pm - Reply

    This is a terrible breadcrumb design, two clicks to get where you want instead of one. I prefer traditional breadcrumbs where the breadcrumb path is always showing in the upper area of the page. This little SharePoint breadcrumb icon with expanding breadcrumb menu is much slower. It doesn’t take much space to always have a static display of breadcrumbs…it’s worth it!

  23. Henrique January 9, 2015 at 10:47 am - Reply

    This Worked!!

  24. Dahey January 21, 2015 at 2:22 am - Reply

    How do I do this if I am using HTML to create the master page? Is there a code snippet I can use?

  25. Bob March 2, 2015 at 9:44 pm - Reply

    Great article. Is there a way to just lay out the breadcrumbs in a line across the top that is present all the time? Like Home>project1>project1_dates. This is what my users really want.

  26. Patrick March 5, 2015 at 2:32 am - Reply

    Hi, it work very good in all pages, but in powerpivot gallery it show at back, how ia can put the popup in front of silverligth?

  27. 0101 November 5, 2015 at 11:06 pm - Reply

    Small tip to avoid the ugly javascript, if you replace ThemeKey=”v15breadcrumb” with ThemeKey=”spcommon”, it works as expected.

  28. James R December 9, 2015 at 7:33 pm - Reply

    Hi
    Thank you for article. I have a question for you, I did follow your steps, everything working exceptional but it doesn’t working for sub sites which was created by code. It’s working when I refresh master page, otherwise it doesn’t. Please give a solution to overcome this issue in share point 2013.

  29. Shweta January 14, 2016 at 10:21 am - Reply

    Hello

    Though the custom master page for SharePoint Online 2013 site gave the breadcrumb but I no longer see the quick launch navigation links to the left..custom master page was built on a copy of Seattle.master..kindly suggest a fix

  30. Adrian Fiechter January 31, 2016 at 6:29 pm - Reply

    Hi
    A very easy way to deploy breadcrumbs on document library level is the free tool Plain365
    https://fiechter.eu/2016/01/31/breadcrumb-for-sharepoint-document-libraries/

  31. Paul Cooper April 28, 2016 at 10:38 pm - Reply

    Nice post if you are using Seattle. If you are using the BindTuning Metro solution you can’t move it to the top of the page!

  32. sumit September 27, 2016 at 2:28 pm - Reply

    I m not able to see breadcrumbs option in master page setting , i m just able to see 2 option

  33. Joe November 1, 2016 at 4:39 pm - Reply

    This works fine to me, but is it possible the have the path in just one line? like sitename > folder1 > folder2 ?

    Thank you

Leave A Comment

Captcha * Time limit is exhausted. Please reload CAPTCHA.