# AnnouncementBar

> Top banner for promotions and shipping announcements

Canonical URL: https://fa7e86e3d553:3005/islands/navigation/announcement-bar

> Top banner for promotions, shipping thresholds, or announcements. Place above Navbar.

## Preview

**Category**: Navigation

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| messages | array | yes | - | Array of message strings to display |
| speed | number | no | 4000 | Rotation speed (ms) when multiple messages |
| backgroundColor | string | no | - | Custom background color (CSS color value) |
| textColor | string | no | - | Custom text color (CSS color value) |
| dismissible | boolean | no | false | Show close button to hide bar |
| link | string | no | - | Optional URL to make entire bar clickable |
| sticky | boolean | no | false | Stick to top of viewport (z-index 51, above Navbar) |

## Embed Example

```html
<lx-island name="AnnouncementBar">
  <script type="application/json">
{
  "messages": []
}
  </script>
</lx-island>
```

## Usage Patterns

**Single message with link:**

```html
<lx-island name="AnnouncementBar">
  <script type="application/json">
{
  "messages": []
}
  </script>
</lx-island>
```

**Rotating messages:**

```html
<lx-island name="AnnouncementBar">
  <script type="application/json">
{
  "messages": []
}
  </script>
</lx-island>
```

## Tips

- Place **above Navbar** (first section of page)
- messages array rotates automatically if multiple messages
- speed in milliseconds (4000 = 4 seconds per message)
- dismissible:true stores dismissal in localStorage (won't show again in session)
- link prop makes entire bar clickable — good for flash sales or featured collections
- Use backgroundColor + textColor for branded styling (defaults to theme colors)
- Keep messages short (under 60 chars) for mobile readability

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `close-btn` | Close/dismiss button |
| `icon` | Icon element |
| `link` | Clickable link |
| `root` | Outermost container |
| `text` | Primary text content |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Sticky Header Coordination

When using with a sticky Navbar, set `sticky:true` on AnnouncementBar and pass `offsetTop:"40px"` to Navbar:

```html
<lx-island name="AnnouncementBar">
  <script type="application/json">
{
  "messages": []
}
  </script>
</lx-island>

<lx-island name="Navbar">
  <script type="application/json">
{
  "logo": {},
  "links": [
    {
      "label": "example-label",
      "url": "example-url"
    }
  ]
}
  </script>
</lx-island>
```

Or use the combined [SiteHeader](/islands/navigation/site-header) island which handles this automatically.

## Related Islands

- [SiteHeader](/islands/navigation/site-header) — Combined announcement + navbar (preferred for sticky headers)
- [Navbar](/islands/navigation/navbar) — Place announcement bar above navbar
- [CountdownTimer](/islands/content/countdown-timer) — Use inside announcement bar for urgency