Search

Other names: searchbox, search field

A search input provides visitors an input field to search for specific content within a site or database.

With search, visitors can filter content using different keywords or phrases.

The search component includes:

  • A concise label
  • Some placeholder text
  • A magnifying glass icon

Search is an optional element. For search to work, you'll need to have a Google Search ID for your domain and include a search results page for your website.

Active search

This search bar appears on the right side of the header. This is the default search bar in the template.

Desktop

Site header screenshot

HTML

Using active search include in site header

Following code (that has both the search and the site navigation includes) needs to be placed right before closing </header> tag

Inactive search

This search bar is hidden (inactive) and becomes active when people select the search menu icon. This search is used on mobile and for sites that use icon menu (which includes the search icon).

HTML

Using inactive search include in site header

Following code (that has both the search and the site navigation includes) needs to be placed right before closing </header> tag

Note: Path to the include will be relative to the directory of your page.

Featured search

This search is directly under the main menu in a prominent container. It's size and location means the website is intentionally showcasing search as a top task.

HTML

Implementation notes

Featured search can be only used with navicons.njk or navicons-landing.njk layouts, since page.njk and landing.njk page layouts already use active search in their page header by default. The .featured-search class needs to be added to the #head-search div in the header of your page. To do this, add the search: Featured parameter to your page front matter data.

Using search include in site header

Following code (that has both the search and the site navigation includes) needs to be placed right before closing </header> tag

Usage

When and how to use it

Always use a clear and concise label for your search bar. Visitors should readily understand what the search is for.

Try to use just one search per page. If you need multiple searches, clearly label them to indicate their purpose.

For the best search optimization, evolve your content with search results. If visitors frequently use terms that are not in your content, consider working those search terms into the page content.

Place search into the navigation-search container, which is after Mobile Controls.

On mobile, the search box becomes a search icon button. When selected, it opens a full-width search box under the header.

How not to use it

Search field input should fit into one line. Do not use multiline search inputs.

Do not default to an advanced search. The majority of visitors will want to do a simple keyword search.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes