Build a Notification Banner / Announcement Bar

By /
⏱ 2 min read

Top-of-page banners (cookie consent, system maintenance, “what’s new”) are simple-looking but reveal interesting design questions: when to show, when to hide, how to persist dismissal, and how to avoid breaking the layout.

Functional requirements

  • Top-of-page banner with message
  • Optional CTA (Learn more, Update now)
  • Dismiss button
  • Don’t reappear after dismiss (per user / device)
  • Different banner types (info, warning, success)

Architecture

Two components:

  • Banner manager: determines which banner (if any) to show
  • Banner UI: renders message, CTA, dismiss

The “always there” layout problem

Banner shifts everything below by its height. Solutions:

  • Reserve space at top of layout (sticky banner area)
  • Banner uses fixed positioning over content (overlap)
  • Adjust scroll-to-top math to account for banner

Best: layout reserves space; banner pushes content down.

Dismiss persistence

Don’t show the same banner twice. Options:

  • localStorage: simple, per device. Lose on private browsing.
  • Cookie: server-readable. Subject to cookie consent rules.
  • Server-side: synced across devices. Requires user account.

For most banners, localStorage is sufficient.

  • Informational: blue/neutral. “New feature available.”
  • Warning: yellow. “Scheduled maintenance Friday.”
  • Critical: red. “Security incident — change password.”
  • Success: green. “Email verified.”

Targeting

Show different banners to different users:

  • By tier: paid users see different banners than free
  • By page: only on dashboard
  • By time: only between two dates
  • By feature flag: A/B test banners

Two simultaneous banners — show both? Stack vertically? Or queue?

Usually: max one banner at a time. Priority order: critical > warning > info.

Accessibility

  • Banner has role="status" or role="alert" based on severity
  • Dismiss button has explicit label (“Dismiss notification”)
  • Banner does not steal keyboard focus
  • Color contrast meets WCAG AA

Special category. Legal compliance:

  • Show before any tracking cookies are set
  • Reject button must be as prominent as Accept (GDPR)
  • Granular control (Necessary, Analytics, Marketing)
  • Persist user choice (cookie or localStorage)

Most apps use a third-party CMP (Consent Management Platform): OneTrust, Cookiebot, Iubenda.

Common antipatterns

  • Banner re-appears after dismiss
  • Banner that reads “important update” but provides no useful info
  • Cookie banner that does not actually block tracking
  • Banner overlapping critical UI (e.g., a button)

Frequently Asked Questions

Where should the banner appear?

Top of page is conventional. Bottom slide-up (toast-style) for less-urgent. Avoid middle of content.

Can I A/B test banner messaging?

Yes. Standard A/B testing framework. Track click-through and dismiss rate per variant.

What about banner fatigue?

Cap frequency: at most one banner per session, or per user per week. Banners that always show get ignored.

Scroll to Top