GC Design System Components
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Header
<gcds-header>

Also called: global header, brand header.

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

  • Required on Canada.ca
  • Required on GC sites

  • GitHub
  • Figma

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.

  • Signature.
  • Language toggle.
  • Skip-to-content link.
  • Always preserve the integrity of the Government of Canada signature. Never modify it in any way, stretch it, or change the colours or text.
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

  • Set up a skip-to-content link as a shortcut for people using an assistive technology and improve keyboard navigation. The link skips navigation elements to lead directly to the main page content.
  • Avoid putting other elements ahead of the skip-to-content link. It’s more discoverable if it’s the first or second item.

Include optional elements in your header

  • Consider using the top navigation for services and websites that need a dedicated primary navigation.
  • Use the top navigation on Canada.ca pages when the service or product is self-contained and targets an internal audience, like GC Design System.

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-07-17