SharePoint Breadcrumb V3 – navigate between folders

Breadcrumb is one of the most requested features by SharePoint users but unfortunately Microsoft removed it with SharePoint 2013 and to this day it was never reintroduced.

Last year I did a solution to bring back the breadcrumb to SharePoint without modifying the master page and today I’m releasing its third version with new features implemented based on the feedback provided by the users.

The new version is configurable according to your needs, includes support for folders inside libraries and supports custom master pages.

breadcrum with folder support

New Features

Based on the feedback provided by the users during last months I added support to:

  • Show Folders – this option will build a trail of your navigation inside libraries;
  • Hide Page Libraries – this option hides the pages libraries node from the breadcrumb and it includes multilingual support; (only supported on SharePoint Online, always hidden on SharePoint Server)
  • Hide from Pages – this option hides the breadcrumb in specific pages defined by the url;
  • Breadcrumb Element – this option allows you to define the DOM element where the breadcrumb will be added;

How to install the breadcrumb

The breadcrumb is provided in a WSP solution and needs to be uploaded to each site collection where you want to have it visible, to install do the steps below:

  1. On the root site of your site collection go to Site Settings
  2. Click on Solutions under Web Designer Galleries
  3. Upload and Activate the solution

How to configure the breadcrumb

The configuration of the breadcrumb requires a modification of a JavaScript file explained in the steps below:

  1. Open the site with SharePoint designer
  2. Go to All Files Style Library FabricUIBreadcrumb js
  3. Check out and edit in advanced mode the breadcrumb.js
  4. At the top of the file modify the breadcrumbProperties object according to the table below:
    var breadcrumbProperties = {
    	showFolders: true,
    	breadcrumbElement: "",
    	pagesLibrary: "Pages",
    	sitePagesLibrary: "SitePages",
    	hidePageLibraries: true,
    	hideFromPages: [""]

    Property Type Default Value
    showFolders Boolean True
    breadcrumbElement String (id of DOM element e.g. “#breadcrumb”) “”
    pagesLibrary String “Pages”
    sitePagesLibrary String “Site Pages”
    hidePageLibraries Boolean True
    hideFromPages String Array [“”]
  5. Save the file, check it in and publish the major version

How to create a modified package of the breadcrumb

If you have multiple site collection where you need to install the breadcrumb there’s no need to modify the JavaScript file manually in each site collection.

To modify the original WPS solution follow these steps:

  1. Download and install the WSP Repackage Tool
  2. Extract the Breadcrumb_V3.wsp to a folder, if your wsp file is not recognized by a compression tool you can rename the extension to .zip
  3. Once extracted go to SharePointBreadcrumb_Breadcrumb feature Style Library FabricUIBreadcrumb js
  4. Modify the breadcrumb.js file
  5. Open the WSP Repackage Tool
  6. Select the source directory of your files
  7. Select the output directory where the WSP file will be created
  8. Provide a name to the custom WSP
  9. Click Repackage
    SharePoint WSP Repackage


If you have suggestions for new features please use the comment section bellow, as always the source files are available on GitHub and I invite you to collaborate with this project.

Download Breadcrumb WSP
Explore Solution on GitHub

22 Responses to “SharePoint Breadcrumb V3 – navigate between folders”

  1. Lorne

    April 30, 2018

    So I uploaded your solution package to my top level SPO site collection. Oddly though, SPO won’t allow me to activate it even though I’m the global admin, SPO primary admin and SC admin. Telling me I don’t have permissions. Which is, as I said, odd, since I have successfully activated other solution files….

  2. Eugene

    May 8, 2018

    Hello sir, this is super awesome callosum, thank you! I activated on my site collection and it works as described here, but 1) I want to limit this solution only to document libraries. Right now it shows on every page (web part pages, regular publishing pages, etc.). 2) I would also like to move where the navigation appears – i.e. have it appear directly above the library, and not at the top of the page. 3) Right now the initial text that the top level of a library defaults to is the site collection name, while I would like it to default to the library name and skip the site name altogether. 4) Lastly, it cuts off folder names after a certain length, can the width of each breadcrumb node be auto and expand/collapse as needed?

    I could use Hide from Pages in the js file to add all the pages I don’t want users to see the navigation, but there are still the other things I noted above. I tried to throw the code in the js file into a CEWP instead and it came out funky. It works but the formatting is gone and folder levels appear vertically instead of horizontally.

    Thanks in advance for any help/suggestions you can provide!

    • João Ferreira

      May 9, 2018

      Hi Eugene,

      Thanks for your feedback and suggestions, based on that I did a custom version of the breadcrumb that only displays it on Libraries and a couple system pages(can be ignored with the option hide from pages)
      You can download the latest version from this link.

      1. It’s only visible in document libraries (only when you navigate to a folder)
      2. Not sure if I understood this one, if you can share an image showing were you want it to be visible
      3. Removed the site collection node, it starts with the document library
      4. Removed the max width for folder names from the css it now displays the entire library name

      When using CEWP make sure the css is being referenced. By reading your description seems to me the css was not loaded.
      As an alternative you can use a script editor and add the css directly inside of


      To get this version working deactivate the current solution, upload and activate the new one, once the upload is done I recommend you to refresh the page using CTRL + F5.

      Let me know if this works for you.

      My best,

      João Ferreira

  3. IB

    May 17, 2018

    Hi João,

    This solution is terrific! Great job! However, when I activate the solution on my site collection it only displays the path to the current page. It doesn’t display any folder navigation. Could you clarify how specifically to update the js file so that it will display the folder navigation as well? Sorry still learning, so any assistance is appreciated.

    • João Ferreira

      May 19, 2018

      Hi Ian,

      The folder path is only displayed within document libraries, for all other scenarios it will only display sun sites and pages.

  4. Bill Woodall

    May 23, 2018

    Question, is it possible to make the “Breadcrumbs” font smaller?

    • João Ferreira

      May 28, 2018

      Hi Bill,

      Yes it’s possible using CSS, 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 and edit the breadcrumb.css in advanced mode
      4 – Locate the rule bellow and modify the font size * {
      font-size: 18px!important;

      5 – Check in the file and publish the major version
      6 – Refresh your browser using CTRL + F5 to clear the css from cache

  5. Shri

    June 1, 2018


    This works great with Seattle and Oslo. How can i apply to any other custom master page (copy of Seattle)?

    • João Ferreira

      June 1, 2018


      Yes this can be applied with custom master pages, if your structure is different than the original masters you can reference the id of the element where you want to append the breadcrumb.
      Let me know if you need any further clarification.

  6. Dario Züger

    June 6, 2018


    Your tool is great. I somehow have a node too much now in my breadcrumbs when I open a folder in a document library. Even when I click on this link I get an error page.

    As an example: I have a subsite “Organization” and there a document library “Documents” with a folder “Test”.
    The breadcrumbs are now like: Portal > Organization > org (Site URL) > Documents > Test

    • João Ferreira

      June 6, 2018

      Hi Dario,

      Do you have any special character in your breadcrumb nodes? Have you modified the defualt settings? Is this something that is happening everywhere or just in a specific library?

  7. HLin

    June 15, 2018

    This solution is great. I activate the solution on the site collection, but open the document labary the breadcrumbs not display directly, we always need to refresh the web. Why?

    • João Ferreira

      June 15, 2018


      Open the dev Tools on your browser and check if you have any script error. If not refresh the browser using CTRL + F5 to make sure the cache is cleared.

      • HLin

        June 15, 2018

        No script error on my browser and the cache is cleared. But the question is exist.

        • João Ferreira

          June 15, 2018

          What version of SharePoint are you using, and also let me know the browser? Is this happening only with you or also with other users?

          • Pablo

            June 20, 2018

            I am experiencing the same issue, I need to refresh to see the breadcrumbs within libraries. I am running Sharepoint 2013

          • João Ferreira

            June 27, 2018

            Hi Pablo,

            I’m still not able to reproduce this locally, can you please let me know if you have any script error in the browser console?

  8. Wayde

    July 12, 2018

    Thanks for this solution! Works great in my SharePoint 2016 environment. Enjoy your beer on me! The only thing I miss from the custom breadcrumb I had in the old 2010 environment is the list view drop down at the last breadcrumb. Changing list views doesn’t seem as intuitive in 2016.

    • João Ferreira

      July 13, 2018

      Thanks for the beer Wayde. The view selection is a good idea for the next version stay tuned for future updates of the 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.