This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Language navigation

Language navigation 📸

Open this example in a new tab

Code

Markup


<nav class="govuk-language-navigation" aria-label="Language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item">
      <span class="govuk-language-navigation__text"
        aria-current="true" lang="en">English</span>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/cy" rel="alternate" lang="cy" hreflang="cy">Cymraeg      </a>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

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

Language navigation with multiple languages

Open this example in a new tab

Code

Markup


<nav class="govuk-language-navigation" aria-label="Language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item">
      <span class="govuk-language-navigation__text"
        aria-current="true" lang="en">English</span>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/fr" rel="alternate" lang="fr" hreflang="fr">Français      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/hi" rel="alternate" lang="hi" hreflang="hi">हिंदी      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ja" rel="alternate" lang="ja" hreflang="ja">日本語      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ur" rel="alternate" lang="ur" hreflang="ur">اردو      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/zh" rel="alternate" lang="zh" hreflang="zh">中文      </a>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

{{ govukLanguageNavigation({
  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 navigation with large amount of multiple languages

Open this example in a new tab

Code

Markup


<nav class="govuk-language-navigation" aria-label="Language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item">
      <span class="govuk-language-navigation__text"
        aria-current="true" lang="en">English</span>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ar" rel="alternate" lang="ar" hreflang="ar">العربيَّة      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/bg" rel="alternate" lang="bg" hreflang="bg">български      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/bn" rel="alternate" lang="bn" hreflang="bn">বাংলা      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/de" rel="alternate" lang="de" hreflang="de">Deutsch      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/el" rel="alternate" lang="el" hreflang="el">Ελληνικά      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/es" rel="alternate" lang="es" hreflang="es">Español      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/fa" rel="alternate" lang="fa" hreflang="fa">فارسی      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/fr" rel="alternate" lang="fr" hreflang="fr">Français      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/gu" rel="alternate" lang="gu" hreflang="gu">જોર્જિયન      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/hi" rel="alternate" lang="hi" hreflang="hi">हिंदी      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/hu" rel="alternate" lang="hu" hreflang="hu">Magyar      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/it" rel="alternate" lang="it" hreflang="it">Italiano      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/lt" rel="alternate" lang="lt" hreflang="lt">Lietuvių      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/lv" rel="alternate" lang="lv" hreflang="lv">Latviešu      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ne" rel="alternate" lang="ne" hreflang="ne">नेपाली      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/pa" rel="alternate" lang="pa" hreflang="pa">ਪੰਜਾਬੀ ਗੁਰਮੁਖੀ      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/pl" rel="alternate" lang="pl" hreflang="pl">Polski      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ps" rel="alternate" lang="ps" hreflang="ps">پښتو      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/pt" rel="alternate" lang="pt" hreflang="pt">Português      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ro" rel="alternate" lang="ro" hreflang="ro">Română      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ru" rel="alternate" lang="ru" hreflang="ru">Русский язык      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/sk" rel="alternate" lang="sk" hreflang="sk">Slovensky      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/so" rel="alternate" lang="so" hreflang="so">Soomaali      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/sq" rel="alternate" lang="sq" hreflang="sq">Shqip      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ta" rel="alternate" lang="ta" hreflang="ta">தமிழ்      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/tr" rel="alternate" lang="tr" hreflang="tr">Türkçe      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/uk" rel="alternate" lang="uk" hreflang="uk">Українська      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ur" rel="alternate" lang="ur" hreflang="ur">اردو      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/zh" rel="alternate" lang="zh" hreflang="zh">简体中文      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/zh" rel="alternate" lang="zh" hreflang="zh">w&quot;&gt;繁體中文（臺灣）      </a>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

{{ govukLanguageNavigation({
  items: [
    {
      text: "English",
      lang: "en",
      current: true
    },
    {
      text: "العربيَّة",
      lang: "ar",
      href: "#/ar"
    },
    {
      text: "български",
      lang: "bg",
      href: "#/bg"
    },
    {
      text: "বাংলা",
      lang: "bn",
      href: "#/bn"
    },
    {
      text: "Deutsch",
      lang: "de",
      href: "#/de"
    },
    {
      text: "Ελληνικά",
      lang: "el",
      href: "#/el"
    },
    {
      text: "Español",
      lang: "es",
      href: "#/es"
    },
    {
      text: "فارسی",
      lang: "fa",
      href: "#/fa"
    },
    {
      text: "Français",
      lang: "fr",
      href: "#/fr"
    },
    {
      text: "જોર્જિયન",
      lang: "gu",
      href: "#/gu"
    },
    {
      text: "हिंदी",
      lang: "hi",
      href: "#/hi"
    },
    {
      text: "Magyar",
      lang: "hu",
      href: "#/hu"
    },
    {
      text: "Italiano",
      lang: "it",
      href: "#/it"
    },
    {
      text: "Lietuvių",
      lang: "lt",
      href: "#/lt"
    },
    {
      text: "Latviešu",
      lang: "lv",
      href: "#/lv"
    },
    {
      text: "नेपाली",
      lang: "ne",
      href: "#/ne"
    },
    {
      text: "ਪੰਜਾਬੀ ਗੁਰਮੁਖੀ",
      lang: "pa",
      href: "#/pa"
    },
    {
      text: "Polski",
      lang: "pl",
      href: "#/pl"
    },
    {
      text: "پښتو",
      lang: "ps",
      href: "#/ps"
    },
    {
      text: "Português",
      lang: "pt",
      href: "#/pt"
    },
    {
      text: "Română",
      lang: "ro",
      href: "#/ro"
    },
    {
      text: "Русский язык",
      lang: "ru",
      href: "#/ru"
    },
    {
      text: "Slovensky",
      lang: "sk",
      href: "#/sk"
    },
    {
      text: "Soomaali",
      lang: "so",
      href: "#/so"
    },
    {
      text: "Shqip",
      lang: "sq",
      href: "#/sq"
    },
    {
      text: "தமிழ்",
      lang: "ta",
      href: "#/ta"
    },
    {
      text: "Türkçe",
      lang: "tr",
      href: "#/tr"
    },
    {
      text: "Українська",
      lang: "uk",
      href: "#/uk"
    },
    {
      text: "اردو",
      lang: "ur",
      href: "#/ur"
    },
    {
      text: "简体中文",
      lang: "zh",
      href: "#/zh"
    },
    {
      text: 'w">繁體中文（臺灣）',
      lang: "zh",
      href: "#/zh"
    }
  ]
}) }}

Language navigation inverse 📸

Language navigation that appears on dark backgrounds

Open this example in a new tab

Code

Markup


<nav class="govuk-language-navigation govuk-language-navigation--inverse" aria-label="Language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item">
      <span class="govuk-language-navigation__text"
        aria-current="true" lang="en">English</span>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/cy" rel="alternate" lang="cy" hreflang="cy">Cymraeg      </a>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

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

Language navigation 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-navigation" lang="cy" aria-label="Dewis iaith">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/en" rel="alternate" lang="en" hreflang="en">English      </a>
    </li>
    <li class="govuk-language-navigation__list-item">
      <span class="govuk-language-navigation__text"
        aria-current="true" lang="cy">Cymraeg</span>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

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

Language navigation with mixed text directions

Open this example in a new tab

Code

Markup


<nav class="govuk-language-navigation" aria-label="Language">
  <ul class="govuk-language-navigation__list">
    <li class="govuk-language-navigation__list-item">
      <span class="govuk-language-navigation__text"
        aria-current="true" lang="en" dir="ltr">English</span>
    </li>
    <li class="govuk-language-navigation__list-item">
      <a class="govuk-language-navigation__link" href="#/ar" rel="alternate" lang="ar" hreflang="ar" dir="rtl">العربية      </a>
    </li>
  </ul>
</nav>

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

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

Language navigation with language description

Add visually hidden text, written in the language of the link, so screen reader users know that selecting a link leads to a translation of the page".

Open this example in a new tab

Code

Markup


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

Macro

{% from "govuk/components/language-navigation/macro.njk" import govukLanguageNavigation %}

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