A search field with live results under the input. Filters on the current language by default.
Add Search to a header or a dedicated search page once a site has enough content that browsing menus alone isn't fast enough — a knowledge base, a blog archive, or a documentation site are typical cases. Results update as the visitor types, so there's no separate results page to build or maintain.
Because it filters by the page's current language by default, a multilingual site's search stays scoped to content the visitor can actually read. Combine it with Pagination on a full search-results page for large result sets, or keep it as a lightweight header dropdown for quick lookups.
Typical use cases
A webshop with more than a few dozen products benefits from putting Search directly in the header, letting shoppers skip category browsing entirely and jump straight to a specific item by name or keyword. A portfolio with a large body of past work can use it the same way — searchable by client name or project type — even though most portfolios are small enough that browsing alone is still fine. A professional-services site with a resource library or knowledge base is arguably the strongest case: visitors often arrive already knowing the term they're looking for, and live search gets them there in one step instead of several clicks through a menu.
Common mistakes
Placing Search only on a dedicated results page, reachable from nowhere else, defeats most of its value — put it in the header or inside MobileMenu on small screens, so it's always one tap away rather than something a visitor has to already know exists. A generic placeholder like 'Search...' also under-communicates scope; 'Search articles...' or 'Search products...' sets a clearer expectation of what will and won't turn up results.
On a large, content-heavy site, pair the block's live results with a full Records and Pagination results page for the case where a query returns more matches than fit in a small dropdown — the live dropdown is best for quick jumps, not for browsing dozens of matches.
Because results appear as the visitor types, make sure the input still carries a real label or accessible placeholder rather than relying on an icon alone — assistive technology needs the same cue a sighted visitor gets from the field's appearance.
<Search placeholder='Search...' />