The Announcement Banner

Add a site-wide banner for release announcements, migration notices, or other important news.

The announcement banner appears above the navbar on every page of your site. 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:

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:

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):

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.

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:

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:

great-docs.yml
announcement: false

For the full reference on banners and other visual options, see the Theming & Appearance page in the User Guide.