announcement-banner

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 key attribute (v1.0.5+) (or backwards compatible with data-banner-key 1.0.3+) to set your own storage key for comparison (defaults to the first link URL).

Installation

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.css and banner.js to 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>

Changelog

v1.0.6 npm package name changed from herald-of-the-dog to @zachleat/announcement-banner

This site is open source. Improve this page.