Announcement bars: useful notice or navigation clutter?

Key takeaways

An announcement bar is a thin strip above the header for a time-limited message: a holiday closure, free delivery threshold or an urgent service update. It helps when the message matters to most visitors and is short. It hurts when it is permanent, rotates, pushes the menu down on phones or cannot be dismissed. Use one message, and remove it when it expires.

• Use it for short, time-limited messages most visitors need.
• One message, no rotating slides.
• Let visitors dismiss it, and keep it slim on phones.
• Remove it when the message expires.

When is an announcement bar useful?

It is useful for information that changes what visitors do today: holiday opening hours, delivery cut-off dates, a service outage, a new booking system. It sits above the navigation where everyone sees it, without needing a pop-up.

• How clear website navigation improves user experience
• Seasonal offers in the menu: promote without clutter

When does it become clutter?

Announcement bars become clutter when they are left up permanently, carry marketing slogans, rotate between several messages or stack with a cookie banner and a sticky header. On phones, each strip pushes the menu and content further down. Visitors learn to ignore a bar that never changes.

• Cookie banners and chat widgets that cover your menu
• Sticky headers: helpful or in the way?

How should it be designed?

Keep it slim and plain, with one short sentence and at most one link.

• One short message, under about 80 characters.
• One link to details, if needed.
• A clear close button with an accessible name.
• Sufficient colour contrast for the text.
• No auto-rotating messages.
• Not sticky on phones.

What about rotating messages?

Rotating messages move before visitors finish reading and draw attention away from the page. WCAG 2.2 success criterion 2.2.2, Pause, Stop, Hide, requires a way to pause content that moves automatically for more than five seconds. One fixed message is simpler and more effective.

Should the bar appear on every page?

Only if the message applies everywhere, such as a closure or a site-wide delivery change. A message about one service belongs on that service's page, not above every page of the site. Showing irrelevant notices across the site teaches visitors to skip the bar, so the next important message gets missed too.

Treat the bar as part of the navigation: it sits above the menu and pushes it down, so every message has a cost. Give someone the job of removing each message on its end date, and keep a short log of what ran and when, so seasonal notices can be reused next year.

What does this look like in practice?

A pattern we see: a shop's header has a rotating three-message bar, a sticky header and a cookie banner, leaving less than half the phone screen for content. Replacing the rotating bar with one dismissible delivery message, shown only in the run-up to a cut-off date, frees the screen.

• See client work
• Website Design & Development for UK businesses

Announcement bar checklist

• Only for time-limited, useful messages.
• One message, no rotation.
• Dismissible.
• Slim and not sticky on phones.
• Removed when it expires.

• The header CTA button: one action that stands apart
• Full-screen menus: stylish overlay or a step too far?

Next step

Check whether your announcement bar's message is still true today. If not, remove it.