Skip to main content
Design resources
Back

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.

When not to use

Do not use the Welsh language toggle:

  • where there is no Welsh translation for a service
  • in personal tax account services — use the account header which already has a Welsh language toggle

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:

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: Welsh language toggle 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