Global header - Canada.ca design pattern: Canada.ca design system

  • Last updated: 2022-08-17

Mandatory on standard pages

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

Having the same global header on all pages:

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

When to use

Include the global header on all Government of Canada web pages. Determine which header elements to use based on the type of page you’re creating.

Standard pages

Standard pages are pages where people can navigate away without losing data, triggering errors or terminating their session.

Global header requirements for a standard page

Global header requirements
Header element Mandatory
Government of Canada signature (linked to Canada.ca home) Mandatory
Language toggle Mandatory
Site search box Mandatory
Divider line Mandatory
Theme and topic menu Mandatory
Breadcrumb trail Mandatory
Sign in button Optional
Background colour (white) Mandatory
Transactional pages

Transactional web pages are pages with an interaction task where people might lose data, trigger errors, or terminate their session if they navigate away from the page.

Global header requirements for transactional pages

Global header requirements
Header element Mandatory
Government of Canada signature (linked to Canada.ca home) Mandatory (Link to Canada.ca home page is optional)
Language toggle Mandatory (Note)
Site search box Optional
Sign in button Optional
Divider line Mandatory
Theme and topic menu Optional
Breadcrumb trail Optional
Background colour (white) Mandatory
Return to footnote Note referrer: 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.
Campaign pages

Campaign pages are 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.

Global header requirements for a campaign page

Global header requirements
Header element Mandatory
Government of Canada signature (linked to Canada.ca home) Mandatory
Language toggle Mandatory
Site search box Mandatory
Sign in button Optional
Divider line Mandatory
Theme and topic menu Optional
Breadcrumb trail Mandatory
Background colour (white) Mandatory

Implementation resources

Latest changes

Updated content design for clarity, added contextual Sign in button, added implementation resources to the global header
The small screen version was modified to a slimmer version

Did you find what you were looking for?

What was wrong?

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Thank you for your feedback

Date modified: