Language switcher

Links to this page in each language the service offers. Each name is written in its own language, so people can find theirs without reading another.

When to use

On every page of a service that exists in more than one language. Put it at the top of the main content, before the page heading, so it is the first thing after the header.

<nav class="ag-lang ag-mb-0" aria-label="Language">
  <ul class="ag-lang__list" data-docs-languages>
    <li><a class="ag-lang__link" href="#lang-example" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a class="ag-lang__link" href="#lang-example" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

Preview a country at the top. The list shows the languages that pack has banner strings for.

Rules

• Each link points to the same page in the other language, not to the home page.
• Each link has hreflang and lang, so screen readers pronounce the name correctly and search engines link the versions.
• The current language is marked with aria-current="true" and is not a link.
• Names are endonyms: Kiswahili, not Swahili; Yorùbá, not Yoruba. Never flags: flags are countries, not languages.
• Keep the order stable across pages, with the country's primary official language first.

Pack fields

The keys of strings, and language for the default.