Site search box: Canada.ca design

Mandatory on standard and campaign pages

The site search box is an element of the global header. It allows people to search Government of Canada content using a simple search field.

Results for site search are at the level of all Government of Canada web content, or a subset of content at the department or agency level.

When to use

The site search box is mandatory on all pages, except transactional pages.

What to avoid

Don’t use the site search box for searching anything other than content indexed by GC Search. Place search for other datasets within the content area of the page.

Content and design

Find content and design specifications and visual examples.

Content specifications

The site search box consists of 3 visual elements:

• text input field (maximum 170 characters)
• input box placeholder text
• search button with magnifying glass icon

In the text input field, the placeholder label is:

• "Search Canada.ca" in English
• "Rechercher dans Canada.ca" in French

The placeholder label in a contextualized search box is:

• "Search [institution]" in English
• "Rechercher dans [institution]" in French

Interactions

• Searches query the GC Search index. Typing a search term in the input field and selecting the search icon opens a results page.

Design specifications

• Position: top-right corner of the global header area, below the language toggle link
• Form class: form-inline
• Button icon: glyphicon-search glyphicon
• Button class: btn btn-primary btn-small
• Colour: #26374a
• Length of input field: maxlength=170
• Value size: 34

The search elements are responsive. They scale according to screen size.

Visual examples

Image description: site search box - large screen

The search box appears in the top-right corner, underneath the language toggle and directly across from the Government of Canada signature.

The site search bar is a rectangle, defined by a light grey border. Within the rectangle are the words, ‘Search Canada.ca’. To the right of the rectangle is a blue square with a white magnifying glass icon within.

Image description: site search box - small screen

The search box appears in the header, directly below the Government of Canada signature and the language toggle. It spans across the screen.

The site search bar is a rectangle, defined by a light grey border. Within the rectangle are the words, ‘Search Canada.ca’. To the right of the rectangle is a blue square with a white magnifying glass icon within.

How to implement

Find working examples for implementing the site search box.

GCweb (WET) theme implementation reference

The implementation reference includes how to configure each element of the header.

• GCWeb (WET) header documentation

Implementations

Determine what best suits the type of page you're creating.

Configure search

The Principal Publisher provides support for GC Search adoption, search configuration, indexing of web pages, functionality errors and other search related requests:

• GC Search Support (only available on the GC network)

Research and rationale

Placing site search in the top-right corner of a web page is an established web convention.

Policy rationale

As part of the global header, the site search box is a mandatory element under the Canada.ca Specifications.

• Mandatory elements of the design system

Latest changes

2023-06-26

Updated the guidance to include advice on what to avoid, content and design specifications, visual examples, implementation guidance, support for search configuration, and policy rationale