Skip to main content
Use banners to display important announcements, updates, or notifications across your entire documentation site. Banners appear at the top of every page, support Markdown formatting, and can be made dismissible. Banners use the color defined by the colors.dark property in your docs.json. To add a banner, use the banner property in your docs.json: 
"banner": {
  "content": "🚀 Version 2.0 is now live! See our [changelog](/changelog) for details.",
  "dismissible": true 
}

​
Properties

​
content
string
required
The banner message. Supports plain text and Markdown formatting.
​
dismissible
boolean
Whether users can dismiss the banner. When true, users can close the banner and it won’t reappear for their session. Defaults to false.

​
Language-specific banners

Configure different banner content for each language in your documentation. Language-specific banners are defined within the navigation.languages array in your docs.json. 
{
  "navigation": {
    "languages": [
      {
        "language": "en",
        "banner": {
          "content": "🚀 Version 2.0 is now live! See our [changelog](/en/changelog) for details.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["en/overview", "en/quickstart"]
          }
        ]
      },
      {
        "language": "es",
        "banner": {
          "content": "🚀 ¡La versión 2.0 ya está disponible! Consulta nuestro [registro de cambios](/es/changelog) para más detalles.",
          "dismissible": true
        },
        "groups": [
          {
            "group": "Getting started",
            "pages": ["es/overview", "es/quickstart"]
          }
        ]
      }
    ]
  },
  "banner": {
    "content": "🚀 Version 2.0 is now live!",
    "dismissible": true
  }
}

​
Fallback behavior

Banners follow a priority order when determining which content to display:
  1. Language-specific banner: If the current language has a banner configuration, it takes priority.
  2. Global banner: If no language-specific banner exists, the global banner property is used.
Banner dismissals are tracked per language. When a user dismisses a banner:
  • The dismissal is stored for that specific language
  • Switching to a different language will show that language’s banner (if not previously dismissed)
  • If the banner content changes, the banner will reappear even if previously dismissed