Cookie Banners

What is a cookie banner?

A cookie banner, or cookie consent bar, informs visitors that a website uses cookies or similar technologies and lets them accept, reject or customise their choices. Depending on the laws that apply to a site, such as the GDPR and ePrivacy rules in the EU, consent may be required before non-essential cookies for analytics or advertising are set. Banners appear as bars along the bottom or top of the screen, as corner boxes, or as dialogs with detailed category settings.

Best practices for cookie consent

• Offer "Accept" and "Reject" with equal visual weight; hiding the reject option is considered a dark pattern by many regulators.
• Provide a "Settings" or "Customise" option with categories such as necessary, analytics and marketing.
• Do not load non-essential scripts until the user has agreed.
• Keep the text short and link to your privacy or cookie policy.
• Let users change their choice later, for example through a link in the footer.
• On mobile, make sure the banner does not cover the whole screen or important navigation.

Accessibility tips

Give the banner a landmark or dialog role with a clear label, such as role="region" with aria-label="Cookie consent", or a <dialog> if it blocks the page. Buttons must be reachable by keyboard and have visible focus. If the banner is modal, move focus into it and keep it there until a choice is made. Check contrast for both buttons and the body text.

Framework versions

These cookie consent banner HTML CSS examples are available in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. They provide the interface and a small script that stores the choice; you still connect the categories to your own scripts and check the wording against the rules that apply to you. Bootstrap 6 dialog versions use the native <dialog> element. Preview them live, then copy the code from the code tabs or download it.