Create a modern breadcrumb navigation on SharePoint

Breadcrumb navigation was available by default on SharePoint 2007 and 2010 but with the introduction of SharePoint 2013 it was removed and until today it wasn’t reintroduced.

Today I’m revisiting one my most read articles, back in 2013 I wrote an article to explain how this functionality can be added again to SharePoint and judging by the number of views this article still has there’s a lot of people trying to get the breadcrumb back.

The method from the previous article is still valid but it requires you to manually modify the master page, if you are not going to customize the layout of your site there’s no need to mess with it.

SharePoint Breadcrumb

Info: If you are looking for a solution to add the breadcrumb to the modern sites check this article.

The new version that I bring you today adds the breadcrumb navigation to all SharePoint pages, using the breadcrumb style defined by the Fabric UI.

In this version, the breadcrumb is created with a script that is deployed globally by a custom action. The original script was created by André Lage and is available in the Office PNP repository, I did some modifications to it to create a modern breadcrumb following the Fabric UI design rules.

Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page’s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy.

Fabric UI breadcrumb

Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.

This solution creates a site collection feature and deploys the JavaScript and CSS files. It’s deployed as a declarative sand box solution, even though declarative sand box solutions are still supported by Microsoft I know that some of you want to stay away from it. With that in mind I’ll build a new version of the modern breadcrumb to be deployed using the addin model.

To install the modern breadcrumb download the WSP at the bottom of the article do the following:

  1. Go to Settings Site Settings
  2. Click on Solutions under Web Designer Galleries
  3. Upload and activate the solution
    Activate breadcrumb solution
  4. Once the solution is activated the breadcrumb will be visible in all sites

If for some reason you want to disable or uninstall the breadcrumb do the following:

  1. Go to Settings Site Settings
  2. Click on Mange Site Collection features under Site Collection Administration
  3. Deactivate the feature SharePoint Breadcrumb Navigation
    Deactivate breadcrumb solution
  4. Go to Settings Site Settings
  5. Click on Solutions under Web Designer Galleries
  6. Deactivate and delete the solution

This solution is compatible with SharePoint 2013/2016 and SharePoint Online and supports Seattle and Oslo master pages.

Bellow you have the links to download the solution and the link to the GitHub repository where you can find the complete Visual Studio Solution.

New version available
A new version of the breadcrumb is available here with support for folders and custom master pages.

Download Breadcrumb WSP
Explore Solution on GitHub


47 Responses to “Create a modern breadcrumb navigation on SharePoint”

  1. Christophe

    February 13, 2017

    This looks very interesting! Does your solution remove useless levels like “Sites” or “Pages” in the trail?

    Reply
  2. Andrew Caplinger

    August 9, 2017

    This is close to what I need, but unless I’m missing something it doesn’t appear to give a longer breadcrumb within a deep folder hierarchy in a given document library. I still only see the two levels: current and parent. I have a doc library folder structure like: Client Docs\John and Jane Doe\Family Foundation\Taxes\2015\, and as I’m working in there at that level, I have no visual indicator of which client I’m looking at. Can you please help?

    Thanks in advance.

    Reply
    • João Ferreira

      August 14, 2017

      I’ll check the possibility to build a custom version that will show the libraries folder structure.

      Reply
      • Mike Hatheway

        September 28, 2017

        I also would like to see library/folder integration.

        I currently tested the JS here:
        http://ranaictiu-technicalblog.blogspot.ca/2013/07/sharepoint-2013-folder-navigation-for.html
        Using:
        Add-PnPJavaScriptLink -Name FolderNavigation -Url “[url to JS file]/FolderNavigation.js” -Sequence 9999 -Scope Site
        This uses the MS PnP PowerShell (https://github.com/SharePoint/PnP-PowerShell) instead of the JSLink that he recommends. It seems to work “fine” in SP Online (classic view).

        I’m wondering if something in that older JS might help with adding the folders in your solution? It’s an ok solution but lacks the modern look (and standards) of your solution.

        Just a thought.

        Reply
        • João Ferreira

          October 11, 2017

          Hi Mike,

          Thanks for the feedback, I’ll check the possibility to include the name of the folder.
          This version only works on classic environments, but tomorrow I’ll release a new version that works on modern sites using SPFx

          Reply
          • Ankit

            December 5, 2017

            Hi Joao,
            Thanks for your readymade solution it worked like a charm. Can you please confirm if same wsp works for Modern view also ?

            Thanks,Ankit

          • João Ferreira

            December 5, 2017

            Hi Ankit,

            This wsp solution only works for classic SharePoint, I have an article that explains how to migrate this solution to the modern SharePoint but the package is not provided in the article due to the limitations caused by the cdn.
            The article is available here
            The SPFx framework 1.4 will allow us to provide solutions without the CDN, when that is available I’ll update the article and provide the installation package for the modern sites.

      • Angama Larry

        February 22, 2018

        Hi,

        did you finish the version that display the document library structure as asked by “Andrew Caplinger” ?

        would be nice to have it 🙂

        Reply
        • João Ferreira

          March 4, 2018

          Hi Angama,

          I’m at the moment working on other projects, but I’ll soon publish the new version.

          Reply
  3. Andreas

    August 14, 2017

    Thanks for a great addon! It’s mindblowing that SharePoint doesn’t include this by default.

    Reply
  4. Susan

    August 18, 2017

    Awesome

    Reply
  5. Dave

    August 24, 2017

    Really great solution, but for some reason, it is not working with seattle master page. Oslo is working fine.

    Here is the exception I’m getting:
    Uncaught DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node

    thanks for the help!

    Reply
    • João Ferreira

      August 24, 2017

      Thanks Dave,

      What version of SharePoint are you using?

      Reply
      • Dave

        September 6, 2017

        Joao, Office 365. thanks

        Reply
        • João Ferreira

          September 8, 2017

          Hi Dave,

          Thanks for reporting this, in fact the Seattle master page was modified in the Online version.
          I’ve modified the solution and provided a new version that you can download from the article that will support both versions of the Seattle master page.

          Reply
  6. Elliot

    September 6, 2017

    Hi – this looks perfect for us, we’ve installed it, it’s activated, but it’s not doing anything.

    We’re on SP online 2013.

    How does this interact with master pages? If we have a custom master page, do we need to edit that in Designer?
    Do we need to do anything other than install the solution?
    Do we need any navigation settings? or do we need to add a part to the main page?

    Also, the Solutions option in the site settings for our main site doesn’t appear in the site settings for our sub sites – is that to be expected? i.e. do the sub sites inherit solutions from the top-level site?

    Any tips you could give me on troubleshooting would be most appreciated…

    cheers
    -E

    Reply
    • João Ferreira

      September 8, 2017

      Hi Elliot,

      This solution runs a custom script using JS Link ans it support the default masters from SharePoint 2013, 2016 and Online.
      If you are using a custom master I can not grantee the compatibility of the solution as it might have a different HTML structure.
      The only thing you need to do with this is upload and activate the solution and it will activate a site collection feature to render the breadcrumb.

      The solutions option is only available in the root site, the sandbox solutions are installed globally to all the sub sites of the site collection, all the sub sites will inherit the solutions from the parent site.

      If you are using a custom master page you have the alternative to activate it in the master page code, I wrote an article that explains it a few years ago.

      My best,

      João Ferreira

      Reply
  7. Gabi Abbenseth

    October 6, 2017

    Hi João,

    great solution!

    I needed to add german language support in the js-File (line 64) – otherwise the page title is not displayed:

    if (document.location.pathname.indexOf(‘SitePages’) != -1 || document.location.pathname.indexOf(‘Pages’) != -1 || document.location.pathname.indexOf(‘Seiten’) != -1)

    In the long run it could be made more versatile by checking the correct language variable.

    Regards and thanks
    Gabi

    Reply
    • João Ferreira

      October 11, 2017

      Hi Gabi,

      Thanks for the feedback, I’ll add support for other languages in the next version.

      My best,

      João Ferreira

      Reply
  8. Jonathan Valdes

    November 30, 2017

    Hi man

    Great article!

    Sorry for asking, but. I’m working with sharepoint online and for develop I use chrome web tools, today I’m trying to make a new project in visual studio and I could not be able to do that, because I only have the options SharePoint – Add ins . this type of project create and entirely site and I’m looking just create a project similar that yours has. I want to be able to deploy my project in any site collection with wsp. ( just like you )

    How did you create initially your project?. Which option do I need to select?. I wonder if you can give me some guidance. just for the project creation the rest I can handle.

    Thanks in advance

    Jonathan.

    Reply
    • João Ferreira

      December 1, 2017

      Hi Jonathan,

      In order to get the project type required to create the SandBox WSP solutions you need to have Visual Studio installed in the server where SharePoint is installed. If you don’t have SharePoint Server you will not be able to get those type of projects.
      To create the project do the following:
      1 – On Visual Studio go to File -> New Project
      2 – Expand the Visual C# group
      3 – Expand the Office/SharePoint
      4 – Select SharePoint – Empty project
      Create new project

      Once the project is created you need to tell Visual Studio to not include DLLs in the solution file, otherwise you will not be able to install the solution on SharePoint online.
      1 – Open the project properties
      2 – Set the property Include Assembly in Package to False
      Remove DLL

      Reply
    • João Ferreira

      December 1, 2017

      Jonathan,

      Detailed instructions of the project creation can be found in this article.
      http://sharepoint.handsontek.net/2017/02/26/how-to-add-google-analytics-to-sharepoint-without-modifying-the-master-page/

      Reply
      • Jonathan Valdes

        December 1, 2017

        Hi João Ferreira

        Amazing!, thank you for your support. it’s was really helpful for me. handsontek included on my favorites webs about SharePoint resources.

        Have an outstanding day.

        Reply
  9. Arvid Nikka

    December 21, 2017

    This was really great, thanks a lot!

    Reply
  10. john

    January 10, 2018

    Hi Joao Ferreira,
    Thanks for this great solution. now i was searching for a breadcrumb navigation for my SP online without the need to modify the master page.and seems this solution will provide most of what i was planning to have.but i got this issue inside my SP online sites:-
    1. i have a team site collection named “PMO”
    2. under this i have sub-site named “Projects”
    3. then under projects i have created multiple projects sub sites such as “ProjectA”, “ProjectB”, and so on…
    4. now under the projects sites “ProjectA” and “ProjectB” i have different lists “ListA”, “ListB”.

    now if i am inside this location
    PMO >> Projects >> Project A >> ListA >> Item title

    the solution will only show this path:-
    PMO>> Projects >> ProjectA

    so the list name and item title will not be included. so is there a way to get the breadcrumb showing the list name and item title ??
    Thanks again for this solution.
    John

    Reply
    • João Ferreira

      January 10, 2018

      Hi John,

      Thanks for your feedback, this has been a common request.
      I’ll release a new version of the breadcrumb soon with support for lists ans libraries.

      Reply
  11. Hanif B

    February 16, 2018

    How do you adjust the font of the breadcrumb titles? They appear too large and truncate alot on most of my sites thank you!

    Reply
    • João Ferreira

      March 4, 2018

      Hi Hanif,

      To reduce the font size do the following:

      1 – Open the site with SharePoint designer
      2 – Go to All Files -> Style Library -> fabricuibreadcrumb -> css
      3 – Check out the breadcrumb.css and edit in advanced mode
      4 – Locate the rule below and modify the font size
      li.ms-Breadcrumb-listItem * {
      font-size: 16px!important;
      }
      5 – Save the file, check it in and if asked publish the major version
      6 – Refresh your browser using CTRL + F5 to make sure you clear the cache

      Reply
  12. Craig Thomson

    February 19, 2018

    This would be great also what about not showing the breadcrumbs on the “Home” page?

    Reply
    • João Ferreira

      March 4, 2018

      Hi Craig,

      I have a second version of the breadcrumb planned that will include an option to hide the breadcrumb from certain pages.
      It will be published soon.

      Reply
  13. Hitesh

    February 26, 2018

    HI..
    this is great as we have been looking for something on our OnPrem sharepoint 2016.. and trying to work with master pages isnt working well for me..
    i am also looking for the breadcrumbs to show the full path.. rightnow it just shows the first 2 folders of the path but we have some that are 4 or more folders deep.

    Reply
    • João Ferreira

      March 4, 2018

      Hi Hitesh,

      I have a second version of the breadcrumb planned that will include an option to define the depth of the breadcrumb.
      I’m working on other projects now but the new version should be released soon.

      Reply
      • Robert

        March 16, 2018

        Any timeline on this, thanks :)?

        Reply
        • João Ferreira

          April 29, 2018

          Hi Robert,

          It will be released today, a new article will be published explaining all the differences of the new version.

          Reply
  14. SP Unique

    March 1, 2018

    Hi Joao Ferreira,
    Thanks for this great solution. now i was searching for refinement breadcrumb ? Did you know how to create?
    Please help me. Thank you..

    Reply
    • João Ferreira

      March 4, 2018

      Hi,

      No sure if I understood can you please clarify what do you mean with refinement breadcrumb?

      Reply
      • SP Unique

        March 5, 2018

        Hi João Ferreira ,
        In a sharepoint web part, i’m already create the Refinement & Search Result. I have 3 refinement such as Department , Branch and Sub Branch. So When I click the refinement , I want to display like a breadcrumb such as Malaysia >> Kuala Lumpur >> KLCC . It’s that possible to do?

        Please Help me. Thank you…

        Reply
        • João Ferreira

          April 29, 2018

          A new version of the breadcrumb will be released today with support for folders and a few other new features.
          I’m afraid the scenario described will not work in the new version.

          Reply
  15. Rana

    April 10, 2018

    I download the folder WSP and uploaded to SharePoint but still, I can see it. Can anyone help me?

    Reply
    • João Ferreira

      April 15, 2018

      Hi Rana,

      Can you please let me know if your solution is activated under the solution gallery?
      If you are using SharePoint Online make sure the custom script is enabled, following this steps:
      Step 1 – Open your Office 365 Admin Portal.
      Step 2 – Then, select SharePoint from left navigation, as shown below.
      Step 3 – On SharePoint admin page, select ‘Settings’. …
      Step 4 – Check ‘Allow users to run custom scripts on personal sites and self-service created sites’, as shown below.
      Step 5 – Then, click “OK”.

      Reply
  16. Sher

    April 18, 2018

    Hello, I have deployed and activated your solution on our SharePoint 2016 On Premise installation. However, do I need to do something special to activate it on document libraries?

    thanks,

    Reply
    • João Ferreira

      April 29, 2018

      Hi Sher,

      Today I will release a new version of the breadcrumb with support for folder in document libraries.

      Reply
  17. Ricardo Carneiro

    June 5, 2018

    Hi Joao,

    Firstly, nice post.

    My question is, is there a way to NOT SHOW Breadcrumb on the root level? (default page)

    Thanks.

    Ricardo.

    Reply
  18. Damian Lewis

    October 17, 2018

    Hi,

    I think this feature is great but I need some advice on one observation that I am seeing.

    When you first go to a document library, the breadcrumbs trail is not shown, yet when you refresh the page the breadcrumb appears. It is very odd.

    Please can you advise?

    Thanks

    Reply
    • João Ferreira

      November 25, 2018

      Hi Damian,

      This is a limitation of the code I’m using to build the breadcrumb, I’m planing a new version of the breadcrumb solutions I have available in this blog and I’ll address this issue.

      Thanks,

      João

      Reply

Leave a Reply


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