Site Pages Breadcrumb Web Part

BreadcrumbsAppIconThe Site Pages Breadcrumb Web Part is the missing link when it comes to navigation between Site Pages on a SharePoint Modern site.  It is a custom SharePoint Framework (SPFx) Web Part that allows you to associate a page with a parent page and grandparent page if need be, by adding a navigation breadcrumb to either the page content or the Command Bar.

If you want to find out more about why we built this web part then please read the associated blog article – The world is not flat and neither should your SharePoint site be!

This web part is currently available for free, consider it a New Years gift from the Kaboodle Software team.


Overview

With the Site Pages Breadcrumb Web Part you can easily build a logical navigation structure for your site by adding navigation links to parent pages as shown in the screenshot below:

BreadcrumbsScreenshot1

Here the web part has been used to add links from the current IT User Guides page to a parent Information Technology page and also to the homepage of the intranet.  These links have been added to the Command Bar which provides and a convenient navigation aid in a consistent way that users will quickly understand and appreciate.

This page will guide you through the steps to:

  • Download and add the solution package to your tenancy
  • Add the app to a web site
  • Add a web part instance to a page
  • Apply various configuration settings

Download and add to the App Catalog

You can download the solution package file, named Kaboodle Breadcrumbs.sppkg, from here.

Then log on as administrator to you O368 SharePoint tenancy and access your App Catalog site.  Note that an App Catalog site is not automatically provisioned but you need to have one to be able to add any custom solutions to your tenancy.

From your App Catalog site click on the Apps for SharePoint link and upload or drag and drop the solution package file into the Catalog.

Once the package has completed uploading, the Do you trust… dialog will pop up.  Click the Deploy button to make the solution available in the tenancy.

BreadcrumbsAppCat

Click on the edit button to edit the properties of the solution package.

BreadcrumbsAppCat2

Provide the following values for the below listed properties:

BreadcrumbsAppCat3


Add the App to a Web Site

Once the solution package has been uploaded, deployed and configured, you can then add the app to any SharePoint site in you tenancy.

To do that, navigate to a suitable site and select the Add an app menu item from the site actions menu and then from the Site Contents page in “Apps you can add” section select and install the Site Pages Breadcrumbs app as highlighted below.

BreadcrumbsInstallApp

You may have to wait a couple of minutes before the solution is available.


Add a Web Part to a page

Once the solution has finished installing, you can navigate to a page where you need a breadcrumb and switch into page edit mode.  Then find a suitable section column in which to add a web part instance.

The web part is listed in the Site Tools group but probably the easiest way to locate it is to type “breadcrumb” into the search box.

BreadcrumbsAddWebpart

Then simply click on the web part icon to an add an instance of the web part to the page.


Web Part configuration

When in page edit mode, you can edit the web part properties to control how the web part is displayed on the page.  The web part is configured using 3 sections for pages and one additional section for overall configuration.

The screenshot below shows the page sections.

BreadcrumbConfig1

Current Page Section

This section provides controls to specify whether the title of the current page is to be shown in the breadcrumbs and which (if any) icon is to be displayed.  All page sections have a drop down control where you can select from a subset of icons in the Office Fabric set.  If you don’t want an icon then just set the drop down to None.  If you would prefer to use an icon that is not listed in the drop down then simply provide the icon name in the custom icon text box.  The set of available icon names can be found from the link to the Office Fabric Icons page.

Parent Page Section

The controls in this section are used to select the Site Page that is considered to be the parent page and to specify an appropriate icon if required.

Grandparent Page Section

The controls in this section are used to select the Site Page that is considered to be the grandparent page.  This might be the intranet homepage or some other page or it could be that a grandparent link is not required.

The screenshot below shows the result of adding a web part to the page with the default settings when a parent and grandparent link have both been specified.

BreadcrumbConfig2

The Configuration Settings Section

The Configuration Settings provides controls that allow you to:

  • Set the location of where the breadcrumbs are displayed
  • Provide a separator character to delimit breadcrumb elements
  • Optionally show the URL as a tooltip for links

The screenshot below shows the web part configured to display the breadcrumb in the web part canvas rather than in the Command Bar and uses a > character to separate breadcrumb elements.

BreadcrumbConfig3

This results in the output shown below:

BreadcrumbConfig4
Addition Information

As with all Kaboodle Software web parts, there is a 2nd page which provides access to product version information and links to additional resources as shown below.

BreadcrumbConfig5

In conclusion

We hope you find this web part useful and please contact us if you have any issues or ideas for improvement.

Have a great New Year in 2019!