Language switcher

Language switcher 📸

Open this example in a new tab

Code

Markup

<nav class="govuk-language-switcher" aria-label="Language switcher">
  <ul class="govuk-language-switcher__list">
    <li class="govuk-language-switcher__list-item">
      <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/cy" rel="alternate" lang="cy" hreflang="cy">Cymraeg</a>
      <span class="govuk-visually-hidden">Change the language to Cymraeg</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}

{{ govukLanguageSwitcher({
  items: [
    {
      text: "English",
      lang: "en",
      current: true
    },
    {
      text: "Cymraeg",
      lang: "cy",
      href: "#/cy"
    }
  ]
}) }}

Language switcher with multiple languages

Open this example in a new tab

Code

Markup

<nav class="govuk-language-switcher" aria-label="Language switcher">
  <ul class="govuk-language-switcher__list">
    <li class="govuk-language-switcher__list-item">
      <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/fr" rel="alternate" lang="fr" hreflang="fr">Français</a>
      <span class="govuk-visually-hidden">Change the language to Français</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/hi" rel="alternate" lang="hi" hreflang="hi">हिंदी</a>
      <span class="govuk-visually-hidden">Change the language to हिंदी</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/ja" rel="alternate" lang="ja" hreflang="ja">日本語</a>
      <span class="govuk-visually-hidden">Change the language to 日本語</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/ur" rel="alternate" lang="ur" hreflang="ur">اردو</a>
      <span class="govuk-visually-hidden">Change the language to اردو</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/zh" rel="alternate" lang="zh" hreflang="zh">中文</a>
      <span class="govuk-visually-hidden">Change the language to 中文</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}

{{ govukLanguageSwitcher({
  items: [
    {
      text: "English",
      lang: "en",
      current: true
    },
    {
      text: "Français",
      lang: "fr",
      href: "#/fr"
    },
    {
      text: "हिंदी",
      lang: "hi",
      href: "#/hi"
    },
    {
      text: "日本語",
      lang: "ja",
      href: "#/ja"
    },
    {
      text: "اردو",
      lang: "ur",
      href: "#/ur"
    },
    {
      text: "中文",
      lang: "zh",
      href: "#/zh"
    }
  ]
}) }}

Language switcher inverse 📸

Language switcher that appears on dark backgrounds

Open this example in a new tab

Code

Markup

<nav class="govuk-language-switcher govuk-language-switcher--inverse" aria-label="Language switcher">
  <ul class="govuk-language-switcher__list">
    <li class="govuk-language-switcher__list-item">
      <span class="govuk-language-switcher__text" lang="en" aria-current="true">English</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/cy" rel="alternate" lang="cy" hreflang="cy">Cymraeg</a>
      <span class="govuk-visually-hidden">Change the language to Cymraeg</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}

{{ govukLanguageSwitcher({
  classes: "govuk-language-switcher--inverse",
  items: [
    {
      text: "English",
      lang: "en",
      current: true
    },
    {
      text: "Cymraeg",
      lang: "cy",
      href: "#/cy"
    }
  ]
}) }}

Language switcher with translated navigation label

When the current page is not in English, translate the `ariaLabel` into the language of the current page.

Open this example in a new tab

Code

Markup

<nav class="govuk-language-switcher" lang="cy" aria-label="Dewis iaith">
  <ul class="govuk-language-switcher__list">
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/en" rel="alternate" lang="en" hreflang="en">English</a>
      <span class="govuk-visually-hidden">Change the language to English</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <span class="govuk-language-switcher__text" lang="cy" aria-current="true">Cymraeg</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}

{{ govukLanguageSwitcher({
  ariaLabel: "Dewis iaith",
  attributes: {
    lang: "cy"
  },
  items: [
    {
      text: "English",
      lang: "en",
      href: "#/en"
    },
    {
      text: "Cymraeg",
      lang: "cy",
      current: true
    }
  ]
}) }}

Language switcher with mixed text directions

Open this example in a new tab

Code

Markup

<nav class="govuk-language-switcher" aria-label="Language switcher">
  <ul class="govuk-language-switcher__list">
    <li class="govuk-language-switcher__list-item">
      <span class="govuk-language-switcher__text" lang="en" dir="ltr" aria-current="true">English</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/ar" rel="alternate" lang="ar" hreflang="ar" dir="rtl">العربية</a>
      <span class="govuk-visually-hidden">Change the language to العربية</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}

{{ govukLanguageSwitcher({
  items: [
    {
      text: "English",
      lang: "en",
      dir: "ltr",
      current: true
    },
    {
      text: "العربية",
      lang: "ar",
      dir: "rtl",
      href: "#/ar"
    }
  ]
}) }}

Language switcher with language description

Add visually hidden text, written in the language of the current page, so screen reader users know that selecting a link translates the page.

Open this example in a new tab

Code

Markup

<nav class="govuk-language-switcher" lang="cy" aria-label="Language switcher">
  <ul class="govuk-language-switcher__list">
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/en" rel="alternate" lang="en" hreflang="en">English</a>
      <span class="govuk-visually-hidden">Newid yr iaith i&#39;r Saesneg</span>
    </li>
    <li class="govuk-language-switcher__list-item">
      <span class="govuk-language-switcher__text" lang="cy" aria-current="true">Cymraeg</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}

{{ govukLanguageSwitcher({
  attributes: {
    lang: "cy"
  },
  items: [
    {
      text: "English",
      lang: "en",
      href: "#/en",
      languageDescriptionText: "Newid yr iaith i'r Saesneg"
    },
    {
      text: "Cymraeg",
      lang: "cy",
      current: true
    }
  ]
}) }}