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" lang="cy" hreflang="cy" rel="alternate">Cymraeg</a>
    </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" lang="fr" hreflang="fr" rel="alternate">Français</a>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/hi" lang="hi" hreflang="hi" rel="alternate">हिंदी</a>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/ja" lang="ja" hreflang="ja" rel="alternate">日本語</a>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/ur" lang="ur" hreflang="ur" rel="alternate">اردو</a>
    </li>
    <li class="govuk-language-switcher__list-item">
      <a class="govuk-language-switcher__link" href="#/zh" lang="zh" hreflang="zh" rel="alternate">中文</a>
    </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 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" 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" lang="en" hreflang="en" rel="alternate">English</a>
    </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",
  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" lang="ar" hreflang="ar" dir="rtl" rel="alternate">العربية</a>
    </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"
    }
  ]
}) }}