A reusable announcement bar banner component. If you don’t need a Hide or Close button on the banner (and to save the user preference), you don’t need this (just use CSS)!
- Demo
- Read more at Ruthlessly Eliminating Layout Shift on Netlify.com
Features:
- Hyperlink to a thing.
- Limited visual style (bring your own theme)
- JavaScript not required.
- Close preference saved to local storage for future page loads
- Frameworkless: Web component
- No CLS (cumulative layout shift):
- Even when opted in to closed by default
- Even when JavaScript fails
- Even when JavaScript succeeds but runs after render
- Use the
keyattribute (v1.0.5+) (or backwards compatible withdata-banner-key1.0.3+) to set your own storage key for comparison (defaults to the first link URL).
- Install from npm:
npm install @zachleat/announcement-banner --save - Inline helper script into your
<head>
// Inline this into your <head>
// The current banner CTA URL
let latestBannerUrl = "YOUR_URL";
let savedKey = localStorage.getItem("banner--cta-url");
// Hide if the banner URL is the same as the saved preference banner URL
if(savedKey === latestBannerUrl) {
document.documentElement.classList.add("banner--hide");
}- Add
banner.cssandbanner.jsto your build CSS and JS. - Add the markup:
<announcement-banner>
<a href="YOUR_URL">YOUR_TEXT</a>
<button type="button" data-banner-close>Close</button>
</announcement-banner>v1.0.6npm package name changed fromherald-of-the-dogto@zachleat/announcement-banner