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

Build a header component

Use this header landmark to communicate a Government of Canada digital service or product.

Coding and accessibility for headers

Set the signature element in the header

Set up the language toggle

Add optional elements to your header

Get your code

Generate an instance of the component you need by selecting its code properties.

  1. Explore by choosing different code values to generate the instance you want.

  2. Get the code and pull it into your environment.

  3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.

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-02