Find your way inside Teams with breadcrumb navigation for SharePoint sites

SharePoint and Teams will soon have a lot in common with the SharePoint framework being used as a base foundation to extend both platforms. While we can’t get our hands on that, I’ve decided to build a solution that makes navigation between SharePoint sites and pages inside Microsoft Teams a little bit easier.

The Problem

Microsoft Teams has already a functionality to display SharePoint pages as tabs. However, when you add a modern Team site to a tab, navigation disappears and if your page provides links to other pages or sub sites you will not be able to navigate back.

While in the browser the Quick Launch is always available, looking at the images below you can see that navigation is missing when the site is displayed inside Teams

The Solution

To overcome this limitation, I’ve built a breadcrumb navigation as an application customizer extension that is only executed when the site is displayed inside Teams.

The breadcrumb solution verifies the user agent and is only rendered if it matches Microsoft Teams user agent.

The development of the breadcrumb solution is not explained in this article but a step by step article that explains how to build an extension and the breadcrumb is available here.

In case you want to build the installation package on your own, the SharePoint/Teams breadcrumb project is available on GitHub; if you just want the breadcrumb up and running on your site, you can get the installation files from here.

How to install the solution

To execute the steps described in this section you will need to install the SharePoint PnP PowerShell.

  1. Download the pre-built solution from here
  2. Extract the content from the zip file and run the Install.ps1
  3. Provide the link to the site collection where you want to apply the breadcrumb
  4. Enter your credentials in the authentication window
  5. Wait a couple seconds while the solution is installed
  6. Refresh your page on Microsoft Teams

The Limitations

Even though this solution brings the navigation back to SharePoint inside Teams, it will not work between different site collections or between Modern and Classic SharePoint. Keep in mind that the breadcrumb navigation only builds the physical path to the root of the site, allowing backward navigation.

Download Teams Breadcrumb
Explore Solution on GitHub

One Response to “Find your way inside Teams with breadcrumb navigation for SharePoint sites”

  1. Ingrid

    May 24, 2019

    Great! This should getting standard to Teams.


Leave a Reply

I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: