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.

Download Breadcrumb WSP
Explore Solution on GitHub

34 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?

  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.

    • João Ferreira

      August 14, 2017

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

      • Mike Hatheway

        September 28, 2017

        I also would like to see library/folder integration.

        I currently tested the JS here:
        Add-PnPJavaScriptLink -Name FolderNavigation -Url “[url to JS file]/FolderNavigation.js” -Sequence 9999 -Scope Site
        This uses the MS 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.

        • 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

          • 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 ?


          • 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


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

        would be nice to have it 🙂

        • 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.

  3. Andreas

    August 14, 2017

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

  4. Susan

    August 18, 2017


  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!

    • João Ferreira

      August 24, 2017

      Thanks Dave,

      What version of SharePoint are you using?

      • Dave

        September 6, 2017

        Joao, Office 365. thanks

        • 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.

  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…


    • 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

  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

    • 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

  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


    • 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

    • João Ferreira

      December 1, 2017


      Detailed instructions of the project creation can be found in this article.

      • 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.

  9. Arvid Nikka

    December 21, 2017

    This was really great, thanks a lot!

  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.

    • 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.

  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!

    • 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 * {
      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

  12. Craig Thomson

    February 19, 2018

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

    • 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.

  13. Hitesh

    February 26, 2018

    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.

    • 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.

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

    • João Ferreira

      March 4, 2018


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


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.