Global header - Canada.ca design pattern

From: Treasury Board of Canada Secretariat

Mandatory on standard pages

The global header is at the top of each web page from the Government of Canada.

Global header – large screen
Diagram of global header for large screens. Text version below:
Text version

The global header has the Government of Canada signature in the top left. Under the signature is the theme and topic menu, and under the menu is the breadcrumb trail. The language toggle link is at the rop right. Under the language toggle is the site search box.

Global header – small screen
Diagram of global header for small screens. Text version below:
Text version

The global header has the Government of Canada signature in the top left. The language toggle link is at the rop right. Under the signature and the language toggle is the site search box. Under the search box is the theme and topic menu. Under the theme and topic menu is the breadcrumb trail.

On this page

Objective

Having the same global header on all pages strengthen the global Canada.ca brand and promotes trust. It also provides a unified experience on the Government of Canada web presence and allows navigation across the broad range of services and information offered.

When to use

The global header should be on all pages from the Goverment of Canada. Some elements are optional in these situations:

  • Transactional scenarios: Pages where people are engaged in a transactional process such that mistakenly following other links would result in errors, loss of data or accidental termination of the session.
  • Campaigns: Landing pages for external marketing or advertising campaigns. The flexibility in layout allows institutions to match elements of their external campaign with the landing page.

How to implement

If you're not on the Managed Web Service, you can implement the global header by using the Centrally Deployed Templates Solution (CDTS).

Follow these requirements:

Global header requirements
Header element Standard page Campaign page Transactional page
Government of Canada signature (linked to Canada.ca home) Mandatory Mandatory Mandatory, but link to Canada.ca home page is optional
Language toggle Mandatory Mandatory Mandatory table 1 note 1
Site search box Mandatory Optional Optional
Theme and topic menu Mandatory Optional Optional
Breadcrumb trail Mandatory Optional Optional
Background colour (white) Mandatory Optional Mandatory

Table 1 Notes

Table 1 Note 1

Transactional web applications must be developed so that people can toggle between official languages on any given page or screen. Some legacy web applications may not have been designed this way. Such applications should be updated to allow this functionality. Until they are replaced or updated, the language toggle can be omitted if its use would result in a loss of data.

Return to table 1 note 1 referrer

Latest changes

2020-06-25: the small screen version was modified to a slimmer version

Report a problem on this page
Date modified: