Remove the modern SharePoint app bar

The modern SharePoint app bar is a great new feature Microsoft introduced in modern SharePoint that finally brings a global navigation across all sites among other features like news, recent files or the creation of new documents or lists.

Despite the benefits of the new interface, you may find it confusing if your intranet is still running in a mix of classic and modern SharePoint sites as this feature is only available for modern.

Hide SharePoint App Bar

If you are willing to remove it or temporally, to properly train your users or simply keep your modern and classic sites consistent you have options to hide it from the interface using one of the methods described in this article.

Temporarily hide the SharePoint app bar using PowerShell

The SharePoint app bar can be hidden temporarily using PowerShell, however this solution will only work until September 30, 2022. You can read more about this limit here.

In order to accomplish the instructions described in this article you need to install the latest version of the PnP PowerShell module, more information about how to do it can be found here.

  1. Open the PowerShell console
  2. Execute the following script (replace the URL in the connect cmdlet by the link to your tenant admin)
    Connect-PnPOnline -url https://contoso-admin.sharepoint.com/
    Set-PnPTemporarilyDisableAppBar $true
  3. It may take some time for the change to be reflected in SharePoint Online.

When you are ready to enable the SharePoint app bar globally to all modern sites you can execute the following script.

Connect-PnPOnline -url https://contoso-admin.sharepoint.com/
Set-PnPTemporarilyDisableAppBar $false

If you are looking for a more permanent solution, or for a solution that will work after September 30, 2022 have a look to the section below.

Permanently hide the SharePoint app bar using an Application Customizer

The alternative to the PowerShell cmdlet to permanently hide the SharePoint app bar is the CSS illustrated below, however in the modern SharePoint sites is not possible to add customizations as it used to be in classic SharePoint.

div#sp-appBar {
    display: none!important;
}
Important! Before we jump into the solution keep in mind that this method is not supported by Microsoft, it has some limitations and may stop working if Microsoft changes the ID of the bar.

To deploy custom CSS to modern site collections is necessary an SPFx application customizer that I’m providing built already in this article. To deploy it in your tenant you must do the following:

  1. Download the application from here, if you want to have a look to the source code and compile it yourself it is also available on GitHub
  2. Open the global SharePoint app catalog
  3. Upload the solution and make sure you check the option Enable this app and it to all sites
    Hide SharePoint App Bar
  4. Click on Enable App

After enabling it, go to a modern site and the SharePoint app bar should be gone. As a downside this solution may show the bar for a brief moment before the CSS gets applied to the page.


2 Responses to “Remove the modern SharePoint app bar”

  1. Jack

    April 25, 2022

    The download link for the application just downloads an empty folder, would you be able to send across a new link so i can download the application

    Reply

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.