I want to build a single page application in SharePoint online using SPFX. Is there any way to remove the left navigation, header component from the page. Please see the image for the highlighted components that i want to remove. enter image description here I know we can use custom css to remove those components but is there any way in SPFX to override / remove it instead of using css ?

This is kind of urgent so quick reply will be highly appreciated.

Regards, Tayyab

  • Unfortunately I think css is your only option here – Rune Sperre Apr 28 at 20:44
  • Thank you for your response @Rune Sperre. I have also looked for other options but did not find any so far. The only drawback i see in CSS approach is in case MS roll out an updates and change the css, the hidden components will appear again on the page. – TAYYAB SUHAIL Apr 29 at 5:40
  • Yes, that is a good thing to keep in mind. I found a quite alternative solution now - I will post it as an answer. – Rune Sperre Apr 29 at 6:29
  • You can look into single app part pages. A couple of other similar questions like here, here and here. – Naveen Apr 29 at 16:56
  • Does this answer your question? Minimal Page - remove navigation list and the headers – Naveen Apr 29 at 16:57

This is a workaround at best.

This solution feels quite dirty and just wrong, but I am posting it in case it can lead to even more interesting approaches.

When displaying a modern page in an iframe, the navigation and header is hidden for us.

Create a classic page (you might have to enable the publishing features to do this), and add a script web part with an iframe that points to your application page.

Sprinkle on some jQuery and css (on classic pages, these classes won't change - so it should be safer to play with that), and now you can access this page by adding ?IsDlg=1 in the URL.


enter image description here

The code I used for the script web part:

<iframe id="embedframe" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%" frameborder="0" src="https://contoso.sharepoint.com/sites/Playground/SitePages/Embed-this.aspx"></iframe>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">

function reallyhide(){
 if(window.location.search.toLowerCase().indexOf("isdlg=1") > 0){
#s4-bodyContainer {height:2000px;}
| improve this answer | |
  • Thanks @Rune Sperre for sharing this workaround, will keep this option in mind. – TAYYAB SUHAIL May 5 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.