---
title: "The Announcement Banner"
description: "Add a site-wide banner for release announcements, migration notices, or other important news."
tags: [Theming, Customization]
---

# The Announcement Banner

The announcement banner appears in the fixed header on every page of your site — above the navbar by default, or below it if you prefer. It is useful for highlighting new releases, deprecation notices, migration information, or any other message you want every visitor to see.

## Simple Banner

The quickest way to add a banner is with a single string. This creates a blue info-style banner that visitors can dismiss:

```{.yaml filename="great-docs.yml"}
announcement: "Version 2.0 is now available!"
```

## Styled Banner

For more control, use the dictionary form. You can choose a color type, add a link, and control whether visitors can dismiss the banner:

```{.yaml filename="great-docs.yml"}
announcement:
  content: "We've moved to a new domain. Please update your bookmarks!"
  type: warning
  dismissable: true
  url: https://example.com/blog/migration
```

The `type` field sets the background color:

| Type | Appearance |
|------|-----------|
| `info` | Blue (default) |
| `warning` | Yellow with dark text |
| `success` | Green |
| `danger` | Red |

When `url` is set, the entire banner text becomes a clickable link.

## Gradient Background

You can replace the solid-color background with an animated gradient by adding a `style` key. The value should be one of the gradient preset names (`sky`, `peach`, `prism`, `lilac`, `slate`, `honey`, `dusk`, or `mint`):

```{.yaml filename="great-docs.yml"}
announcement:
  content: "Check out our new tutorials section!"
  style: mint
  dismissable: true
```

When `style` is set, the gradient overrides the `type` background color.

## Position

By default the banner sits above the navbar. Set `position` to `below-navbar` to place it after the navbar instead. Either way the banner stays in the fixed header at the top of the page:

```{.yaml filename="great-docs.yml"}
announcement:
  content: "Scheduled maintenance this weekend."
  type: warning
  position: below-navbar
```

| Position | Placement |
|----------|-----------|
| `above-navbar` | Above the navbar (default) |
| `below-navbar` | Below the navbar |

## Persistent vs. Dismissable

By default, banners are dismissable: visitors can click the close button to hide them. The dismissal is stored in session storage, so the banner stays hidden for the rest of the browsing session but reappears when the browser is reopened.

To make a banner that cannot be dismissed (useful for critical notices), set `dismissable` to `false`:

```{.yaml filename="great-docs.yml"}
announcement:
  content: "This package is deprecated. Use new-package instead."
  type: danger
  dismissable: false
```

## Removing the Banner

To remove a previously configured banner, either set the key to `false` or delete it from the file:

```{.yaml filename="great-docs.yml"}
announcement: false
```

For the full reference on banners and other visual options, see the [Theming & Appearance](../user-guide/theming.html) page in the User Guide.
