Announcement banner
An announcement banner is a slim strip across the top of a page that carries one timely message and, usually, a link.
- Also called
- banner, top banner
- Platforms
- Web
- In the gallery
- 30 web designs
Announcement banners from the Kombai gallery: a homeware store's sale strip, a fashion shop's first-order code and a pet-sitting app's upsell.
What is an announcement banner?
An announcement banner sits above or just below the main navigation and spans the full width of the page. It holds one short message, like a sale, a shipping perk or a new feature, plus a link to learn more. It stays out of the way: people can read it in a glance and carry on with the page.
- One line of text in a contrasting color band, often with a single link or code.
- Pinned to the top of the page, above or under the navbar, and the same on every page.
Announcement banners show up across announcement banners, navbars, hero sections and storefronts screens.
When to use an announcement banner
- Site-wide offersFree delivery, a sale or a promo code that applies on every page.
- Product newsA release, a new plan or a feature worth one click from anywhere.
- Account nudgesAn upgrade or billing offer that fits in one line inside an app.
When not to use one
- Errors and alertsProblems with the current task belong next to the task, in an inline message.
- ConfirmationsUse a toast to confirm something just happened. A banner stays too long.
- Long messagesIf it needs a paragraph or a form, give it a section or a page of its own.
Anatomy of an announcement banner
This one works. Step through the messages, copy the code or tab to the controls and dismiss it.
- Showing
- Paused
- Dismissed
- Keyboard focus
- BarFull-width band above the nav
- MessageOne short line
- Link or codeThe single action
- Rotation controlsPrevious, next and pause
- DismissCloses it and remembers
- StatesShowing, paused, dismissed, focus
Announcement banner variants
We sorted every announcement banner design in the Kombai gallery and found four patterns. Browse all 30 web designs.
1. Promo code strips
A discount with the code spelled out in the bar, sometimes set in its own chip so it stands out.
2. Rotating messages
Several messages share one bar and take turns, with dots or arrows to show there is more than one.
3. Upgrade prompts in apps
A dark or tinted bar over a dashboard that offers a better plan, with an Upgrade button at the end.
4. Multi-offer bands
Retailers split the strip into two or three short offers side by side, each with its own link.
Where announcement banners show up
Free delivery
Shipping thresholds and member delivery perks, the most common message in the gallery.
Trade and credit offers
Wholesale marketplaces use the bar to offer credit to buyers who open an account, with a link to the terms.
Product news
A new release, a new product or a guided tour, announced to everyone who lands on the site.
Announcement banner vs similar components
Build notes
- Put the banner first in the page, before the navbar, so it is read and tabbed to first.
- Keep it out of the header landmark when it is promotional, and give it a short accessible name.
- Rotating messages need a pause button, and should stop while hovered or focused.
- Make the dismiss a real <button> with an aria-label, and remember the choice so it stays closed.
- Check the text against the band color. Thin bars often use small text that fails contrast.
- Don't put the only copy of important information in the banner. Many people stop seeing it.
FAQ
Should announcement banners be dismissible?
Usually, yes. A close button lets regular visitors reclaim the space once they have read the message. Save the choice for the session or longer, so the banner does not come back on every page. Legal or service notices that everyone must see are the exception.
Is it a good idea to rotate several messages?
Only when each message is short and none is critical. People read one line in a glance, so the second and third messages get far less attention. If you rotate, move slowly, pause on hover and focus, and give a visible pause control.
Above or below the navigation?
Above is the common choice and reads as a site-wide notice. Below the navigation keeps the brand and menu at the very top and suits messages tied to the content, like an upsell inside an app.
Should the banner stick when people scroll?
Usually not. A sticky banner plus a sticky navbar eats a large share of a phone screen. Let it scroll away with the page, or collapse it once people start scrolling.
Related terms
All glossary terms · Browse 30 web announcement banner designs