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 header 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 sandbox solution; even though declarative sandbox 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 add-in model.

To install the modern breadcrumb, download the WSP using the link provided at the bottom of the article, and proceed as follows:

  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, proceed as follows:

  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

Heads up!

If you are using the latest version of Bind Tuning themes you don’t have to do anything to get the breadcrumb back, it’s included by default

Bind Tuning breadcrumb

By | 2017-09-08T15:54:39+00:00 February 20th, 2017|Articles|5 Comments

About the Author:

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

5 Comments

  1. Drew February 27, 2017 at 9:57 pm - Reply

    Hi
    I’m using the CSS only version of Invent, but don’t see where to enable the breadcrumb?

    thanks
    Drew

  2. Scott G. March 27, 2017 at 6:20 pm - Reply

    I’m using the Zues template and was wondering if there was an easy way to move the breadcrumbs from the bottom of the page to the top?

  3. Manilal May 19, 2017 at 10:48 am - Reply

    Does this works on SharePoint Online?

  4. Graeme August 15, 2017 at 9:21 pm - Reply

    Followed the 6 steps but am not seeing in on my sites. Im using SP 2016 online

    • João Ferreira September 8, 2017 at 3:57 pm - Reply

      Hi,

      Thew is a new version of the solution that supports the new Seattle master page used by SharePoint online.

Leave A Comment

Captcha * Time limit is exhausted. Please reload CAPTCHA.