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


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

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.