Welsh language toggle

This pattern lets the user change the language used in a service from English to Welsh and from Welsh to English.

When to use

Use the Welsh language toggle when a service is available in Welsh.

How it works

You need HMRC Frontend to use this pattern — find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

Put the Welsh language toggle on the right hand side below the:

• GOV.UK header
• phase banner
• HMRC banner if you are using it

The Welsh language toggle must be above the back link.

Any information entered before switching language should be retained.

Open this example in a new tab Display in English Display in Welsh

              <nav class="hmrc-language-select" aria-label="Language switcher">
  <ul class="hmrc-language-select__list">
    <li class="hmrc-language-select__list-item">
      <span aria-current="true">English</span>
    </li>
    <li class="hmrc-language-select__list-item">
      <a href="?cy" hreflang="cy" lang="cy" rel="alternate" class="govuk-link" data-journey-click="link - click:lang-select:Cymraeg">
        <span class="govuk-visually-hidden">Newid yr iaith ir Gymraeg</span>
        <span aria-hidden="true">Cymraeg</span>
      </a>
    </li>
  </ul>
</nav>
            

                <nav class="hmrc-language-select" aria-label="Switcher iaith">
  <ul class="hmrc-language-select__list">
    <li class="hmrc-language-select__list-item">
      <a href="?en" hreflang="en" lang="en" rel="alternate" class="govuk-link" data-journey-click="link - click:lang-select:English">
        <span class="govuk-visually-hidden">Change the language to English</span>
        <span aria-hidden="true">English</span>
      </a>
    </li>
    <li class="hmrc-language-select__list-item">
      <span aria-current="true">Cymraeg</span>
    </li>
  </ul>
</nav>
              

                {%- from "hmrc/components/language-select/macro.njk" import hmrcLanguageSelect -%}

{{
  hmrcLanguageSelect({
    language: 'en',
    en: {
      href: '?en'
    },
    cy: {
      href: '?cy'
    }
  })
}}
              

                  {%- from "hmrc/components/language-select/macro.njk" import hmrcLanguageSelect -%}

{{
  hmrcLanguageSelect({
    language: 'cy',
    en: {
      href: '?en'
    },
    cy: {
      href: '?cy'
    }
  })
}}
                

Research

We need more research. If you have used the Welsh language toggle, get in touch to share your research findings.

Discuss the Welsh language toggle on GitHub