1. Government Frontend Component Guide
  2. Cookie banner
Component

Cookie banner

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

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 all)

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)

<%= 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 custom cookie preferences href (preview)

<%= 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.

<%= 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"
    }
  }
} %>