Articles

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

59 Comments

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

    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!

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

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

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

    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. :(

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

    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?

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

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

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

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

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

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

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

    can you do this with olso master page.
    Thanks

    Xuan

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

    this article was informative.i liked it

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

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

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

    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?

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

    Is this application to SharePoint Online as well?
    Thanks.

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

    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)

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

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

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

    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?

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

    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?

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

    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?

    Reply
  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.  […]

    Reply
    1. Bahram February 11, 2015 at 8:43 pm

      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

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

    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.

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

    good article

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

    This worked great for me. Thanks!

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

    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!

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

    This Worked!!

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

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

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

    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.

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

    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?

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

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

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

    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.

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

    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

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

    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/

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

    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!

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

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

    Reply
    1. Carlos Silva February 20, 2017 at 5:53 pm

      Hi Sumit,

      We just published a new version of this article, have a look at: http://academy.bindtuning.com/create-modern-breadcrumb-navigation-sharepoint/

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

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

    Thank you

    Reply
    1. Carlos Silva February 20, 2017 at 5:54 pm

      Hi Joe,

      We just published a new version of this article, have a look at: http://academy.bindtuning.com/create-modern-breadcrumb-navigation-sharepoint/

      Reply

Add a comment


Captcha * Time limit is exhausted. Please reload CAPTCHA.

Author: João Ferreira

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

Search