Product Update
Please note that we have now updated this product so that it can now be installed for and on-premise deployment of SharePoint 2019 as well as for SharePoint Online. Sadly, SharePoint 2016 is not supported.
We’ve also added some new capabilities to make the product more flexible and changed the configuration UI as well.
And, finally, because Microsoft changed their CSS for SharePoint online the ability to merge the breadcrumbs into the command bar was no longer working with the old version but we’ve sorted that as well with this new version.
Please note that this product is intended to allow site designers to construct a logical hierarchical structure between SharePoint modern site page within the same site. This product does not provide breadcrumbs that allow for the navigation between sites and sub-sites. We have another product in the pipe-line that will address this requirement and we will be releasing that soon.
The Missing Link
The 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 of modern site pages
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.
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:
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, is contained within the zip file which can be downloaded from here.
Extract the solution package for the zip, then log on as administrator to you O365 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.
Click on the edit button to edit the properties of the solution package.
Provide the following values for the below listed properties:
- Short Description: Breadcrumb links for site pages
- Description: Sometimes there needs to be logical hierarchical relationship between site pages. This solution allows you to insert a breadcrumb navigator on site pages so as to assist with simple and logical page navigation.
- Icon URL: https://kaboodlesoftware.files.wordpress.com/2018/12/BreadcrumbsAppIcon.png
- Publisher Name: Kaboodle Software
- Support URL: https://kaboodlesoftware.com/products/framework-solutions-for-sharepoint-modern/site-pages-breadcrumb-web-part/
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.
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.
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 configuration panel consist of 2 pages.
Configuration Settings Page
The web part is configured using 3 sections for page breadcrumb links and headers and one additional section for overall configuration settings.
The Current Page Section
The Current Page Section contains controls that govern if and how the header for the current page is displayed.
Use the Show current page title checkbox to decide whether a title for the current page is to be displayed or not. When checkbox in unchecked the header will not be shown and so the settings of other controls in this section will have no effect on what gets displayed.
By default, the title of the current page will be displayed but if you can override this and set any value you like simply be typing a value in the Set custom text textbox.
Use the Select current page icon picker control to select from a sub-set of icons available in the Office Fabric icon set. By default the Return icon is set. If you select None, then no icon will be displayed before the title. If you select custom, then you can use any icon in the Office Fabric icon set. The UI adapts to reveal the Specify current page custom icon text box. Simply type in the icon name of your choice.
You can search the Office Fabric Icon set by clicking the link below this textbox. Scroll down the page to set the set of available icons.
Just hover over an icon to reveal its name and then simply type that icon name in the textbox. Note that the icon name must be an exact match, including text case.
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 custom header and icon if required.
Use the Select a parent site page picker control to select the page that is considered to be the parent of the current page.
Alternatively, you can use the Use a specific URL for the parent link textbox to set any URL you like as the parent link. Note that if you provide a value in this textbox, then that value will take priority over the selected page.
As with the current page, you can provide any text you like for the like by setting the appropriate text in the Set custom link text textbox and you can select from the set of provided icons or specify a custom icon from the Office Fabric set as before.
Grandparent Page Section
The controls in this section are the same as for the parent section except that they apply to the grandparent link.
As before you can choose:
- Whether or not to display the link
- Set a custom URL in place of a selected site page
- Set custom link text in place of the title of the selected site page
- Whether or not to display an icon that will be shown before the link.
The Configuration Settings Section
The Configuration Settings provides controls that allow you to:
- Set the location of where the breadcrumbs are displayed
- Set the timeout period before the links are rendered if shown in the command bar
- Provide a separator character to delimit breadcrumb elements
- Optionally show the URL as a tooltip for links
By default the breadcrumbs will be shown on the canvas of the web part itself but you can choose instead to add the breadcrumbs to the command bar of the page, either before or after existing buttons by selecting the Command Bar (Insert) or Command Bar (Append) option, respectively.
The screenshot below shows the breadcrumbs inserted to the command bar.
The timeout slider is used to control the time delay before the breadcrumbs appear in the Command Bar. This is required because in the modern, asynchronous way of loading pages, sometime the web part gets rendered before command bar and so the web part is looking for a page element in which to insert itself that me not yet exist on the page.
This explains why sometimes, with the older version of this web part, the links where not getting added to the command bar. By setting a timeout we can give the page enough breathing space to load the command bar before adding the breadcrumb links.
By default the timeout is set to 3 seconds but you can adjust that. A little bit of trial and error may be required to make sure you achieve and optimal setting for the page.
You can use the Separator textbox to provide a character or text string that delimits and separates the breadcrumb items.
When the Show link URL as tooltip checkbox is checked the URL of the link will be displayed when the user’s cursor hovers over the link.
Addition Information Page
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.
In conclusion
We hope you find this web part useful and please contact us if you have any issues or ideas for improvement.
Kaboodle Software 
