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

Conclusion

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


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

    Reply
  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!

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

      tags.

      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

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

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

      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.