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
HTML
Include path and usage
The Search njk include code markup:
{% include "src/_includes/search.njk" %}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
Note: Path to the include will be relative to the directory of your page.
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
Include path and usage
The Search njk include code markup:
{% include "src/_includes/search.njk" %}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.
Include path
{% include "src/_includes/search.njk" %}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
Activating Featured Search in front matter data
---
title: Featured Search
layout: navicons-landing.njk
permalink: "components/featured-search.html"
navigation: "../modules/nav-flex.html"
search: Featured
---
Note: Path to the include will be relative to the directory of your page.
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