The Announcement Banner

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

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:

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.

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:

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:

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.