Files
mintlify__docs/components/banner.mdx
Patrick Foster 862b9010cc Open in grok (#2934)
* Banners can also be configured on a per-language

* "Open in Grok" support in contextual-menu

* Grok in keywords

* Apply suggestion from @tembo[bot]

Co-authored-by: tembo[bot] <208362400+tembo[bot]@users.noreply.github.com>

---------

Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Co-authored-by: tembo[bot] <208362400+tembo[bot]@users.noreply.github.com>
2026-01-29 16:53:01 -08:00

96 lines
3.0 KiB
Plaintext

---
title: "Banner"
description: "Add a banner to display important site-wide announcements and notifications."
keywords: ["banner", "announcements", "site-wide"]
---
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`:
<CodeGroup>
```json Product announcements wrap
"banner": {
"content": "🚀 Version 2.0 is now live! See our [changelog](/changelog) for details.",
"dismissible": true
}
```
```json Maintenance notices wrap
"banner": {
"content": "⚠️ Scheduled maintenance: API will be unavailable December 15, 2-4 AM UTC",
"dismissible": false
}
```
```json Required actions wrap
"banner": {
"content": "**Action required:** Migrate to our new version by January 1. [Migration guide](/migration)",
"dismissible": true
}
```
</CodeGroup>
<Note>
You can also configure banners per language by setting `banner` in `navigation.languages`. See [Language-specific banners](#language-specific-banners).
</Note>
## Properties
<ResponseField name="content" type="string" required>
The banner message. Supports plain text and Markdown formatting.
</ResponseField>
<ResponseField name="dismissible" type="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`.
</ResponseField>
## Language-specific banners
Configure different banner content for each language in your documentation. Define language-specific banners in the `navigation.languages` array in your `docs.json`.
```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, display the global `banner`.