Component

Cookie banner

Help users manage their personal data by telling them when you store cookies on their device.

By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren’t set, or to hide the banner if they are.

Setting data-hide-cookie-banner="true" on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).

If the examples below are not showing the banner, make sure the cookies_preferences_set cookie is not present or is set to false.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Cookies on GOV.UK

We use some essential cookies to make this website work.

We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.

We also use cookies set by other sites to help us deliver content from their services.

View cookies

How to call this component

<%= render "govuk_publishing_components/components/cookie_banner", {
} %>

Accessibility acceptance criteria

Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.

Links in the component must:

• accept focus
• be focusable with a keyboard
• be usable with a keyboard
• indicate when they have focus
• change in appearance when touched (in the touch-down state)
• change in appearance when hovered
• be usable with touch
• be usable with voice commands
• have visible text
• have meaningful text

Other examples

With custom content (preview)

Can we store analytics cookies on your device?

This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the cookies page

View cookies

<%= render "govuk_publishing_components/components/cookie_banner", {
  title: "Can we store analytics cookies on your device?",
  text: sanitize("This is some custom text in my cookie banner which lets users know what we're using cookies for. I can also include a link to the <a class='govuk-link' href='/cookies'>cookies page</a>"),
  confirmation_message: "You’ve accepted all cookies."
} %>

With multi paragraph custom content (preview)

Can we store analytics cookies on your device?

This is some custom text in my cookie banner.

There are three paragraphs.

They are passed as an array

View cookies

<%= render "govuk_publishing_components/components/cookie_banner", {
  title: "Can we store analytics cookies on your device?",
  text: [
    "This is some custom text in my cookie banner.",
    "There are three paragraphs.",
    "They are passed as an array"
  ],
  confirmation_message: "You’ve accepted all cookies."
} %>

With custom cookie preferences href (preview)

Cookies on GOV.UK

We use some essential cookies to make this website work.

We’d like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.

We also use cookies set by other sites to help us deliver content from their services.

View cookies

<%= render "govuk_publishing_components/components/cookie_banner", {
  cookie_preferences_href: "/cookies"
} %>

In services asking for analytics only (preview)

Use this type of banner in your service if it only uses cookies for analytics.

Can we store analytics cookies on your device?

Analytics cookies help us understand how our website is being used.

How we use cookies

<%= render "govuk_publishing_components/components/cookie_banner", {
  title: "Can we store analytics cookies on your device?",
  text: "Analytics cookies help us understand how our website is being used.",
  confirmation_message: sanitize("You’ve accepted all cookies. You can `<a class='govuk-link' href='/cookies'>change your cookie settings</a>` at any time."),
  services_cookies: {
    yes: {
      text: "Yes",
      data_attributes: {
        "track-category": "cookieBanner"
      }
    },
    no: {
      text: "No",
      data_attributes: {
        "track-category": "cookieBanner"
      }
    },
    cookie_preferences: {
      text: "How we use cookies",
      href: "/cookies"
    }
  }
} %>