Header
<gcds-header>

Also called: global header, brand header.

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

• GitHub
• Figma

Header anatomy – recommended elements

1. The skip-to-nav includes the skip-to-content link to let a person bypass a cluster of navigation links and jump to the main page content.
2. The signature header spans the top of the site and contains the Government of Canada branded signature and the language toggle. It can also include a search form. It has a divider line along the bottom edge. When the site language is set with the lang attribute, the signature reflects the same Official Language as the page content.
3. The language toggle component is a switch for French and English content. When the site language is set using the lang attribute, the toggle will be available in the other Official Language.

Optional header elements – with H1 title

1. The skip-to-nav includes the skip-to-content link to let a person bypass a cluster of navigation links and jump to the main page content.
2. The banner, when used, precedes the signature header. It's an optional element to communicate the status of the site or page, for sites that are experimental, those in research, pilots, or products in trial mode.
3. The signature header spans the top of the site and contains the Government of Canada branded signature and the language toggle. It can also include a search form. It has a divider line along the bottom edge. When the site language is set with the `lang` attribute, the signature reflects the same Official Language as the page content.
4. The language toggle component is a switch for French and English content. When the site language is set using the language attribute, the toggle will be available in the other Official Language.
5. The menu, or site menu, holds the site navigation. The menu serves as a simplified site map and helps give visitors a sense of a site's purpose and priorities. For transactional products or sites, like those with forms, flows, processes, or storefronts, it's optional to use a simplified or custom site menu or even no menu.
6. The breadcrumbs lay a path from each level of the site's hierarchy to the current page, stated in the page title. The breadcrumbs tell a person where they've been and let them retrace their steps or jump between levels.
7. The H1 title is a separate element from the header component. It tells readers what the page or site is about and acts a signpost, giving them a sense of place.

The search element supports including a search form that is local or global.

Design and accessibility for headers

Assemble your product's header

• Include the signature header with the language toggle for Government of Canada sites and products.

• Always maintain the integrity of the Government of Canada signature. Absolutely avoid modifying it in any way. In particular avoid stretching or changing the colours or text.

• Add a skip-to-content link to aid navigation for people using assistive devices.

• Consider using the menu as a simple navigation for a transactional product, like an app, a form, or a storefront.

• Include the banner if your page or site is experimental. For example, if it's a pilot, you're using it for research purposes, or it's in trial mode.

Improve the accessibility of the header

• Consider making the skip-to-content link visible so any person navigating the site can benefit from the shortcut.

• Write H1 heading content in sentence case.

Write specific link text

• Make link text clear and specific to help a person decide if they should leave the current page. Spell out where a person will go or what they'll find when they select a link.

• Keep link text short and distinctive so a person can scan the links in the header and find what they're looking for. Avoid using "click here" or "read more" as link text.

• Limit the number of links in your header. Too much information and increases cognitive load and can be overwhelming to some readers.

Give your page a title

• Give the page a title that tells readers what the page (or for the landing page the site) is about, what it is for, or what to do.

• Choose either to match the page name you'll display in the browser, to be similar but slightly longer, or to use a call to action – on pages for user tasks or actions.

• Write the H1 title in title case. All other header elements (other than proper names) are in sentence case,