HANDS ON SharePoint
HANDS ON Teams
HANDS ON Lists
HANDS ON tek
M365 Admin
Hide the navigation and the header in modern SharePoint pages
Displaying a modern SharePoint page without the navigation and the header have generated all sort of hacks over the years that try to replicate the famous ?isDlg=1 and the focus mode from classic SharePoint by manipulating the DOM and injecting custom css.
I’ve recently discovered the query string that can be used with modern SharePoint site URLs to strip the pages from all its elements living it just with the content.
By adding the query string ?env=Embedded or ?env=WebView to any modern SharePoint URL (including lists) you will be automatically removing the navigation, header and footer form the page ending just with the content.
In the following animation you can see the differences between a normal and an embedded page.
If you want to preserve the suite bar in the page you can use the query string used by Microsoft Lists – ?env=WebViewList – this however will just work with pages, when added to a list it redirects the user to the Microsoft Lists application.
January 25, 2021
very nice info! thanks
January 25, 2021
bomb.com! Thank you!
January 25, 2021
This is great to know.
Thanks!
January 26, 2021
Great tip! Thank you!!
January 28, 2021
Awesome! Along SPFx solution, this is even cooler!
April 27, 2022
Hi Atif,
There is no easy and recommended way of doing this permanently.
The alternative would be creating a custom SPFx solution to remove all the elements, however this would not be persistent overtime as Microsoft continues to add more and more feature to SharePoint you would need also to update the solution.
This solution is more for you to integrate modern pages without the SharePoint artefacts in other applications like Microsoft Teams rather than sharing the page with the query string in the URL.
Hope this helps to clarify.
Have a nice day 🙂
February 27, 2024
Hi Joao,
I’d also like to make this more permanent and am happy to update the solution as needed. Do you have a guide on how to set up this solution?
Kind regards,
Miss M
February 27, 2024
Hi Miss M.,
You will need to make an SPFx application customizer, this type of application is executed on all pages and can be deployed globally to the entire tenant or locally just to a site collection.
To make it work in specific site collections only you will need to create site collection app catalogs where the app will be then installed, you can learn more about it in the following article:
How to Create a SharePoint Site Collection App Catalog using PnP PowerShell
To create the SPFx solution it is better to look at the Microsoft documentation.
Build your first SharePoint Framework Extension
If you want to start with an extension that is already built instead of starting from scratch, you can have a look to one of my latest projects that I have available on GitHub
Add Microsoft Teams chats to SharePoint
Hope this helps, have a nice day 🙂
January 26, 2024
Olá Alessandro,
Não é possivel infelismente, para uma solução dessas é necessário desenvolver uma solução à medida com SPFx mas a Microsoft não recomenda que isso seja feito para este caso em particular.