GC Design System Components Installation Page templates Contact us Get involved Find a demo GC Design System Components

Header
<gcds-header>

Also called: global header, brand header.

The header is the responsive Government of Canada branded header landmark.

Header component preview

Header anatomy

Header elements are required for GC sites unless noted.

  1. The signature is a branding element that identifies a page as a Government of Canada space. On Canada.ca the signature links to the Canada.ca homepage.
  2. The skip-to-content link lets a person pass navigation to go directly to the main content. The link is hidden until a person navigates to it with a keyboard (focus visible).
  3. The language toggle is a link that lets a person switch between French and English content by linking to the other Official Language.
  4. The search lets a person enter keywords or phrases to find content. It can be set to a local or global search form. Optional, except on Canada.ca campaign and standard pages.
  5. The divider line visually separates the main header elements and the page content.
  6. The top navigation is a primary navigation component for access to priority pages. Optional and, when used, sits beneath the divider line of the same colour.
  7. The breadcrumbs lay a path from the current location to each higher level page within the site hierarchy. On Canada.ca the first link leads to the Canada.ca homepage.
The header image shows 7 elements. The header banner runs the width of the header and has a white background. 1. On the left, the signature has a Canada Flag with Government of Canada in English and French to its right. 2. Centred at the top of the header, the skip to content link is visible in focus state with a bright blue rectangle, double-lined in white, labelled Skip to main content. 3. The language toggle with the link text “Français” is right aligned. 4. Beneath the language toggle, the search bar has the prompt text “Search Canada.ca” within the search input and a small button to the right with a magnifying glass icon. 5. The light grey divider line runs the width of the header and is not visually discernible from the top navigation of the same colour beneath it. 6. The top navigation runs the width of the header in a light grey banner. On the left of the top nav, Home nav link is labelled in bold and on the right are 4 nav links. The first, left-most nav link has a chevron pointing down. 7. Last are the breadcrumbs at the bottom of the header on the left. Canada.ca is the first link and the second is labelled as link.

Design and accessibility for the header

GC Design System components are designed to adapt to the size of the screen or frame where they’re being viewed. As an exception, the text size in the header and footer is fixed.

Check header requirements

Here's what's required for the header on GC sites.

Always include the following components in the header of a standard or campaign page and maintain the default settings.
  • Signature that links to Canada.ca.
  • Language toggle.
  • Search.
  • Breadcrumbs that link to Canada.ca from the first link.
  • Skip-to-content link.
  • Divider line.
Note: As an exception on legacy applications, the language toggle can be omitted if it results in a destructive action (a person loses their data when language is switched). Opt to include:
  • An approved program or institution specific search form instead of the global search form.
  • Sign in button.
  • Top navigation.

Improve the accessibility of the header

Include optional elements in your header

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-04-07