Shantha Kumar T
Hide Search Box in SharePoint SuiteNavBar
Check out the REST API and PnP JS code to hide the Search Box from Top Navigation Bar on the SharePoint Online site
In SharePoint Online, we all have a Search Box in the middle of the Top Suite bar. This looks great most of the times. For some scenarios, the Client wants to hide this search for some sites.
Microsoft gives a handy solution for this. For each Web or Site, SharePoint has a property called SearchBoxInNavBar to handle or manage the SearchBox in the Topbar.
We have to set any of the below value to apply the change to the SearchBox.
- Inherit = 0, – Shows / hide the search box based on the parent web
- AllPages = 1, – Shows the Search Box on all the pages (classic and modern pages)
- ModernOnly = 2, – Shows the Search Box only on the modern pages
- Hidden = 3 – Hides the SearchBox on the site
Based on the above values, we have to use the Hidden / 3 value to the SearchBoxInNavBar for the web object to hide the search box.
Try to use the below REST API snippet to hide the search box from the top navigation bar,
We can also try the below PnP JS snippet to do the same,
await sp.web.select(“SearchBoxInNavBar”).update({SearchBoxInNavBar:0})
The TopNavbar looks like, before running the Code:
After running the code, the TopNavBar looks like below,
