Components

Hide this page

Help users to exit a service quickly and safely.

Open this hide this page example in a new tab
HTML
<div class="govuk-hide-this-page" data-module="govuk-hide-this-page">
  <a href="https://www.google.com/" role="button" draggable="false" class="govuk-button govuk-button--warning govuk-hide-this-page__button govuk-js-hide-this-page-button" data-module="govuk-button" data-new-tab-url="https://www.cgtn.com/nature/weathermap.html" data-fake-page-title="How to prevent the spread of Coronavirus - GOV.UK">
    Hide this page
  </a>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
text string Text for the link. Defaults to Hide this page.
currentTabURL string URL to redirect the current tab to. Defaults to https://www.google.com.
newTabURL string URL to open a new tab to. Defaults to https://www.bbc.co.uk/weather.
fakePageTitle string Fake title that will be passed to the original page's title attribute to mask the user's history. Defaults to How to prevent the spread of Coronavirus - GOV.UK.
id string ID attribute to add to the hide this page container.
classes string Classes to add to the hide this page container.
attributes object HTML attributes (for example data attributes) to add to the hide this page container. 
{% from "govuk/components/hide-this-page/macro.njk" import govukHideThisPage %}

{{ govukHideThisPage({
  text: "Hide this page",
  currentTabURL: "https://www.google.com/",
  newTabURL: "https://www.cgtn.com/nature/weathermap.html",
  fakePageTitle: "How to prevent the spread of Coronavirus - GOV.UK"
}) }}

When to use this component

Use the hide this page component when some people could be put in danger or at risk of harm by using your service. For example, a service about domestic abuse.

How it works

There are 2 ways to use the hide this page component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Open this hide this page example in a new tab
HTML
<div class="govuk-hide-this-page" data-module="govuk-hide-this-page">
  <a href="https://www.google.com/" role="button" draggable="false" class="govuk-button govuk-button--warning govuk-hide-this-page__button govuk-js-hide-this-page-button" data-module="govuk-button" data-new-tab-url="https://www.cgtn.com/nature/weathermap.html" data-fake-page-title="How to prevent the spread of Coronavirus - GOV.UK">
    Hide this page
  </a>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
text string Text for the link. Defaults to Hide this page.
currentTabURL string URL to redirect the current tab to. Defaults to https://www.google.com.
newTabURL string URL to open a new tab to. Defaults to https://www.bbc.co.uk/weather.
fakePageTitle string Fake title that will be passed to the original page's title attribute to mask the user's history. Defaults to How to prevent the spread of Coronavirus - GOV.UK.
id string ID attribute to add to the hide this page container.
classes string Classes to add to the hide this page container.
attributes object HTML attributes (for example data attributes) to add to the hide this page container. 
{% from "govuk/components/hide-this-page/macro.njk" import govukHideThisPage %}

{{ govukHideThisPage({
  text: "Hide this page",
  currentTabURL: "https://www.google.com/",
  newTabURL: "https://www.cgtn.com/nature/weathermap.html",
  fakePageTitle: "How to prevent the spread of Coronavirus - GOV.UK"
}) }}

Add the component to any page where a user could be at risk. This could be across a whole service or just the pages where information is particularly sensitive.

Position the component immediately below the header of your page. It’s position is sticky so it remains visible and easy to activate. On mobile devices the button is fixed to the bottom of the screen, so it can quickly be activated or hidden by the user.

View a full page example of this component

When activated the component loads a frequently visited website into the current browser tab. If Javascript is available the browser will also switch to a new tab, and load a second website into it.

Doing this disables the current browser tab back button, providing an additional level of protection.

Choosing different websites to load

By default, the two websites loaded are www.google.com and www.bbc.co.uk/weather, but these can be changed if there are more appropriate sites for your users.

Open this different websites example in a new tab
HTML
<div class="govuk-hide-this-page" data-module="govuk-hide-this-page">
  <a href="https://www.baidu.com/" role="button" draggable="false" class="govuk-button govuk-button--warning govuk-hide-this-page__button govuk-js-hide-this-page-button" data-module="govuk-button" data-new-tab-url="https://www.cgtn.com/nature/weathermap.html" data-fake-page-title="How to prevent the spread of Coronavirus - GOV.UK">
    Hide this page
  </a>
</div>
Nunjucks
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
text string Text for the link. Defaults to Hide this page.
currentTabURL string URL to redirect the current tab to. Defaults to https://www.google.com.
newTabURL string URL to open a new tab to. Defaults to https://www.bbc.co.uk/weather.
fakePageTitle string Fake title that will be passed to the original page's title attribute to mask the user's history. Defaults to How to prevent the spread of Coronavirus - GOV.UK.
id string ID attribute to add to the hide this page container.
classes string Classes to add to the hide this page container.
attributes object HTML attributes (for example data attributes) to add to the hide this page container. 
{% from "govuk/components/hide-this-page/macro.njk" import govukHideThisPage %}

{{ govukHideThisPage({
  text: "Hide this page",
  currentTabURL: "https://www.baidu.com/",
  newTabURL: "https://www.cgtn.com/nature/weathermap.html",
  fakePageTitle: "How to prevent the spread of Coronavirus - GOV.UK"
}) }}

Research on this component

The design of this component is based on research from a specialist provider of services to survivors of domestic abuse, and in consultation with the Ministry of Justice, Department for Work and Pensions and the Scottish Government.

Live examples of similar components can be found on these websites:

More research is needed to find out:

  • how best to safely announce the component using a screenreader
  • whether the right alignment causes issues for users of screen zoom
  • whether any additional information is required to explain the purpose of the component
  • whether a keyboard shortcut could help some users, and be safely implemented
  • whether the browser history can safely be manipulated, to further reduce the risks

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.