› ›

Adding search bar to header

It’s a common pattern to have a search bar in the header of your website. Submitting a query in this search bar usually redirects user to a separate search results page.

To implement this with Search UI use the <SearchBar> component and add onSubmit prop that redirects user to the search page:

<SearchBox
  onSubmit={(searchTerm) => {
    window.location.href = `${PATH_TO_YOUR_SEARCH_PAGE}?q=${searchTerm}`;
  }}
/>

Once the redirect happens, Search UI will pick up the query from the URL and display the results.

Check out the example implementation below.