mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
8fe299bf9f
* Update components/banner.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * Update organize/navigation.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * Update organize/navigation.mdx Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> * Apply suggestions from code review * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
92 lines
2.8 KiB
Plaintext
92 lines
2.8 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>
|
|
|
|
## 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`. |