Language toggle
<gcds-lang-toggle>

Also called: language switch, language selector.

The language toggle is a link to the same content in the other Official Language.

• GitHub
• Figma

Build a language toggle

Use a language toggle so people are able to switch between languages without losing track of where they were before switching.

Place the language toggle in the top right of the header landmark for predictability and findability.

Coding and accessibility for the language toggle

• Use the href-attribute to set the url of the page in the other Official Language.
• Set the lang attribute with en to indicate the language toggle in French and fr will indicate the language toggle in English.

Note: If using the header component, the language toggle can be assigned using the lang-href attribute.

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.