Language selection

Search


Site search box: Canada.ca design system

  • Last updated: 2023-06-26

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.

On this page

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:

In the text input field, the placeholder label is:

The placeholder label in a contextualized search box is:

Interactions

Design specifications

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

Visual examples

Site search box - large screen
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.

Site search box - small screen
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.

Implementations

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

GC-AEM

For the Government of Canada Adobe Experience Manager (AEM):

CDTS

For the Centrally Deployed Templates Solution (CDTS):

Drupal WxT

For Drupal WxT:

Configure search

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

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 Content and Information Architecture Specification.

Latest changes

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

Page details

Date modified: