Language toggle link

Status

Stable

Type

Canada.ca site functionality

Last review

2022-11-01

Component version

Version 1.1

Purpose

The language toggle link always leads people to the equivalent page in the other official language, ensuring that people are able to switch between languages without losing track of where they were before

How to implement

• The language toggle link consists of only one element—a simple text link indicating either “English” or “Français”
• The link is always presented in the top right corner of the global header area, regardless of the screen size

Before and After

<ul class="list-inline mrgn-bttm-0">
				<li>
					<a href="/fr.html" lang="fr">
						<span class="hidden-xs">Français</span>
						<abbr title="Français" translate="no" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
					</a>
				</li>
			</ul>

<ul class="list-inline mrgn-bttm-0">
				<li>
					<a href="/fr.html" lang="fr">
						<span class="hidden-xs">Français</span>
						<abbr title="Français" class="visible-xs h3 mrgn-tp-sm mrgn-bttm-0 text-uppercase">fr</abbr>
					</a>
				</li>
			</ul>