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

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


One Response 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

Leave a Reply


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