There is an update to the GOV.UK Prototype kit which may affect how your prototype works if you are not using the latest version. Contact #team-plat-ui on HMRC Slack (open in app) if you need more information or support.

Open links in a new window or tab

This pattern lets the user open links in a new window or tab.

When to use

First, design your service so that links open in the same window or tab and test with users. Research shows that some users struggle to get back to a service because the back button does not work in the new window or tab.

Only use this pattern if opening a link in a new window or tab meets a user need or is necessary to use the service. This could be because:

  • the link is to a document in a different format, like a PDF
  • the link is to guidance that cannot be inside the service
  • the user would lose their details if they left the service
  • the user needs to go to another site or service to get information

When not to use

Do not use if opening a link in a new window or tab:

  • does not meet a user need
  • leads to more than one window or tab open within the same service
  • stops the user completing their task

How it works

Always put ‘(opens in a new window or tab)’ inside the link text content.

In the code include:

  • target="_blank" to open in a new window or tab
  • rel="noopener noreferrer" to reduce security risks for some browsers

Do not use any icons in place of the words. See ‘Removing the external link icon from GOV.UK’.

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 in to your code.
            <a class="govuk-link " target="_blank" rel="noopener noreferrer" href="https://www.gov.uk/working-tax-credit/eligibility">Find out if you qualify for tax credits (opens in a new window or tab)</a>
          
              <a class="govuk-link " target="_blank" rel="noopener noreferrer" href="https://www.gov.uk/working-tax-credit/eligibility">Mae hwn yn ddolen (yn agor ffenestr neu dab newydd)</a>
            
              {% from "hmrc/components/new-tab-link/macro.njk" import hmrcNewTabLink %}

{{ hmrcNewTabLink({
  language: "en",
  text: "Find out if you qualify for tax credits",
  href: "https://www.gov.uk/working-tax-credit/eligibility",
  classList: ""
}) }}
            
                {% from "hmrc/components/new-tab-link/macro.njk" import hmrcNewTabLink %}

{{ hmrcNewTabLink({
  language: "cy",
  text: "Mae hwn yn ddolen",
  href: "https://www.gov.uk/working-tax-credit/eligibility",
  classList: ""
}) }}
              

Research

We need more research. If you have used open links in a new window or tab, get in touch to share your research findings.

Discuss open links in a new window or tab on GitHub