1. Component Guide
  2. Cookie banner
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 hidden. If JavaScript is enabled, the banner is displayed if cookie preferences are not set. The banner will stay hidden if cookie preferences are already set.

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 JS is enabled, and 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)

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 multi paragraph custom content (preview) 

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

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

Without ga4 tracking (preview)

Disables GA4 tracking on the banner. Tracking is enabled by default. This includes link tracking on the “You have accepted cookies” section, and allows the pageview event that is sent when GA4 initialises to record the presence of the cookie acceptance message.

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