mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
f8e015ff62
* Improve SEO metadata: update descriptions to 130-155 chars across 177 pages Generated-By: mintlify-agent * Apply suggestion from @ethanpalm * Apply suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> * 💅 --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
96 lines
3.1 KiB
Plaintext
96 lines
3.1 KiB
Plaintext
---
|
|
title: "Banner"
|
|
description: "Add a dismissible banner at the top of your documentation site to display important announcements, release notes, or 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 you can make them 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 text content displayed in the banner. Supports basic MDX formatting including links, bold, and italic text. Custom components are not supported.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="dismissible" type="boolean">
|
|
Whether users can dismiss the banner. When `true`, a close button appears. If a user closes the banner, it stays hidden for them until you update the banner content. 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`. |