How to hide SharePoint search box conditionally

By João Ferreira Jul 21, 2022 Development, Office 365 0 Comments

SharePoint search box is in the suite bar at the top of every page and Microsoft allows site collection administrators to hide it using PowerShell. While this method is suitable for most scenarios it does not allow to hide the search box conditionally for certain pages or for all pages with the exception of Lists and Libraries.

In this blog post I’ll explain how to hide the search box using the official method provided by Microsoft and two workarounds to hide the search box conditionally so you can overcome the limitations of the out of the box settings.

Hide SharePoint search box using PnP PowerShell

In order to disable the out of the box SharePoint search you must install the latest version of the PnP PowerShell module, more information about how to do it can be found here.

1. Open the PowerShell command line
2. Execute the following cmdlet to connect to the SharePoint site collection where you want to hide the search box

   Connect-PnPOnline -url https://conoso.sharepoint.com/sites/projectx -interactive

3. Execute the following cmdlet to hide the search box

   Set-PnPSearchSettings -SearchBoxInNavBar Hidden -Scope Web

   In the SearchBoxInNavBar you can set the scope where the search box shows, the available options are:

   • AllPages – Visible in all modern and classic pages in the site collection
   • ModernOnly – Visible just in the modern pages of the site collection, this also includes modern lists and libraries
   • Hidden – Hides the search from all pages, this will also remove the search functionality from lists and libraries
4. Type Y to confirm

After a few minutes the search will start behaving according to your definition.

Hide SharePoint search box conditionally using a script editor web part

If you just want to hide the search in a specific page or in a set of pages you can use a script editor web part available in the PnP GitHub repository and add a CSS rule that hides the search box component.

If you don’t have the awesome script editor web part yet installed in your environment you can download a compiled version from here, if you want to compile the project yourself the source code is available here. If you already have the web part installed, you can proceed and step 4.

With the web part file in your computer do the following:

1. Open your app catalog and upload the SPPKG file
2. Make sure the option Enable this app and add it to all sites is checked so you can reuse the web part in multiple site collections
3. Click on Enable App

With the web part installed is time to apply the custom CSS rule to hide the search box on each page.

4. Edit the page where you want to remove the search box
5. At the top of the page click in the + icon to add the Modern Script Editor, I recommend you add it as the first web part in the page to get it loaded faster and reduce the flickering of hiding the search box in run time.
6. Click in the Edit markup button
7. Add the following code to HTML text box

   <style>#O365_SearchBoxContainer_container{display:none;}</style>

Note that during the loading of the page the search box might be visible for a brief moment while the code in the script editor is not added to the page.

Hide SharePoint search box conditionally using a custom SPFx Application customizer

If you have a more complex scenario and want to get the search removed from all the front facing modern pages without loosing the access to the search in lists and document libraries, then you need the custom solution I’m providing in this section to hide the search box.

Based on the URL this solution will keep the search component visible using the following rules:

• If the URL has /Forms/ it means the user is in a document library
• If the URL has /Lists/ it means the user is in a list so the

The solution was built by me, and an installation file is available here, if you want to modify it you can find the source code on my GitHub repo.

1. Open your app catalog and upload the SPPKG file
2. Make sure the option Enable this app and add it to all sites is enabled so the solution is deployed to all site collections
3. Click on Enable App

As SharePoint evolves the CSS selector for the Search box might change and if it happens this solution will stop working and must be updated, if you are facing this issue, please let me know in the comment section down below and I’ll do my best to update it.