Azure / Office 365 / SharePoint Development / Search

SharePoint Framework breadcrumb extension sample available

August 10, 2017

When SharePoint 2013 got released there was something missing in the UI. There was no breadcrumb control anymore like in SharePoint 2010. A couple of clients and users were struggling finding their way on the site. In March 2013, I created a script that allowed you to transform the SharePoint text in the suite bar (on the left side) into a breadcrumb.

Info: read more about it - Transform the "SharePoint" Suite Bar Text into a Breadcrumb with PowerShell.

Suite bar breadcrumb

Suite bar breadcrumb

The downside was that this script only worked for on-premises environments because this functionality was not available on SharePoint Online.

Now with the new era of SharePoint development with SharePoint Framework and the extensions, we have a way to re-introduce the breadcrumb control again.

Info: be aware that the SharePoint Framework extensions are currently in developer preview.

Modern UI Breadcrumb

Modern UI Breadcrumb

One of the available extensions is the application customizer. This one allows developers to add scripts / HTML to specifically provided placeholders. Like for example a header and footer placeholder. By making use of this extension model and the header placeholder, I created a breadcrumb sample project which is available in the SharePoint sp-dev-fx-extensions GitHub repository.

Info: check out the sample here - https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-application-breadcrumb

Here is another screenshot of the breadcrumb output:

Modern UI Breadcrumb sample output

Modern UI Breadcrumb sample output

Feel free to contribute and make it better.

Comments