I want to hide the publish bar and search bar from the page. I have no clue doing this SharePoint modern site page.

Any help is much appriciated!

  • do you want to do it for all pages or particular page ? What do you mean by publish bar? just publish button or whole command bar ? – Siddharth Vaghasia May 31 at 8:47

We can do this via SPFx extension if you want to do it at Site, Web or List level.

Assuming that you already know how to create hello world SPFx extension, if not request you to please go through this link.

You need to replace onInit() with below

  public onInit(): Promise<void> {  
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);  
   // code to hide search bar
    document.querySelectorAll('button[title="Search"]')[0].parentNode.style.display = "none";
   // code to hide command bar
document.querySelectorAll('div[class="commandBarWrapper"]')[0].style.display = "none";
    return Promise.resolve();  

Idea here is to find DOM element and apply style to hide the element. Please note that, if MS in future changes the class name or title in future, above solution will break.

For SharePoint classic experience pages - If you want to do it for single page, you can still use below 2 lines and add script editor webpart on targeted page. Put below in document.ready function so that you code executes only when the DOM is ready.

// code to search bar
    document.querySelectorAll('button[title="Search"]')[0].parentNode.style.display = "none";

   // code to command bar
document.querySelectorAll('div[class="commandBarWrapper"]')[0].style.display = "none";

For modern pages - As we don't have any way to add script to modern pages without SPfx webpart, we can use some readily available SPFx webpart.

React SPFx Script Editor

True Script Editor

Please note we can also use jQuery if it is already loaded.

PS. - document.querySelectorAll only works on modern browsers - here is link to check browser compatibility

Hope this helps...Happy coding..!!!

  • Hello, How can I add the script editor to modern SharePoint single site page. I tried adding the webpart, but I couldn't find the script editor but found embed, code snippet etc. – Saanvi Podduturi Jun 3 at 8:45
  • @SaanviPodduturi...scrip editor web part is not available for modern pages. you have to use SPFx webpart only. Editing answer to add readily available script editor webpart from community. – Siddharth Vaghasia Jun 3 at 9:16
  • @SaanviPodduturi...please mark it answer for other's reference... – Siddharth Vaghasia Jun 4 at 9:26

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.