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:
- strengthens the Canada.ca brand
- promotes trust
- provides a unified experience on the Government of Canada web presence
- allows navigation across the broad range of services and information offered
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.
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
| 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
| 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
| 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
- Centrally Deployed Templates Solution (CDTS)
- CDTS Samples - provides links to sample pages that demonstrate how to implement various CDTS features
- GCWeb (WET)
- Drupal WxT
- AEM/Managed Web Service - documentation for AEM is available on GCpedia
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
- Date modified: