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.

The Welsh language toggle sits inside the service navigation component. Follow the GOV.UK guidance about how to position the service navigation component on the page.

When a user switches the language, they should stay on the same page of the service. Any information they have already entered should be kept.

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

HTML
Nunjucks

              <section aria-label="Service information" class="govuk-service-navigation hmrc-service-navigation--with-language-select" data-module="govuk-service-navigation">
  <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">

      <span class="govuk-service-navigation__service-name">
        <a href="#" class="govuk-service-navigation__link">
          Service name
        </a>
      </span>

    </div>

    <nav class="hmrc-service-navigation-language-select" aria-label="Language switcher">
      <ul class="hmrc-service-navigation-language-select__list">
        <li class="hmrc-service-navigation-language-select__list-item">
          <span aria-current="true">ENG</span>
        </li>
        <li class="hmrc-service-navigation-language-select__list-item">
          <a href="?cy" hreflang="cy" lang="cy" rel="alternate" class="govuk-link govuk-service-navigation__link">
            CYM<span class="govuk-visually-hidden"> – Newid yr iaith i’r Gymraeg</span>
          </a>
        </li>
      </ul>
    </nav>

  </div>

</section>

                <section aria-label="Service information" class="govuk-service-navigation hmrc-service-navigation--with-language-select" data-module="govuk-service-navigation">
  <div class="govuk-width-container">

    <div class="govuk-service-navigation__container">

      <span class="govuk-service-navigation__service-name">
        <a href="#" class="govuk-service-navigation__link">
          Enw’r gwasanaethcy
        </a>
      </span>

    </div>

    <nav class="hmrc-service-navigation-language-select" aria-label="Switcher iaith">
      <ul class="hmrc-service-navigation-language-select__list">
        <li class="hmrc-service-navigation-language-select__list-item">
          <a href="?en" hreflang="en" lang="en" rel="alternate" class="govuk-link govuk-service-navigation__link">
            ENG<span class="govuk-visually-hidden"> – Change the language to English</span>
          </a>
        </li>
        <li class="hmrc-service-navigation-language-select__list-item">
          <span aria-current="true">CYM</span>
        </li>
      </ul>
    </nav>
  </div>

</section>

                {%- from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation -%}
{%- from "hmrc/components/service-navigation-language-select/macro.njk" import hmrcServiceNavigationLanguageSelect -%}

{{ govukServiceNavigation({
  serviceName: "Service name",
  serviceUrl: "#",
  classes: "hmrc-service-navigation--with-language-select",
  slots: {
    end: hmrcServiceNavigationLanguageSelect({
      language: 'en',
      en: {
        href: '?en'
      },
      cy: {
        href: '?cy'
      }
    })
  }
}) }}

                  {%- from "govuk/components/service-navigation/macro.njk" import govukServiceNavigation -%}
{%- from "hmrc/components/service-navigation-language-select/macro.njk" import hmrcServiceNavigationLanguageSelect -%}

{{ govukServiceNavigation({
  serviceName: "Enw’r gwasanaethcy",
  serviceUrl: "#",
  classes: "hmrc-service-navigation--with-language-select",
  slots: {
    end: hmrcServiceNavigationLanguageSelect({
      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