Display announcement banners at the top of your documentation pages. Banners are sticky notification bars that appear at the top of pages to communicate important announcements, updates, or information to your users.
Banners support Markdown content, can be configured to appear on specific pages using glob patterns, and can be made dismissible so users can hide them.
Configure banners as an array of banner objects in your redocly.yaml file or in page front matter.
If you ejected the navbar component before version 0.128.0, update it to have the component's full functionality.
| Option | Type | Description |
|---|---|---|
| content | string | REQUIRED. The banner content text. Supports Markdown syntax for formatting, links, tags and emphasis. Example: This is **a great announcement.** [Button](https://redocly.com) |
| dismissible | boolean | Configure whether users can dismiss the banner. When true, a close button appears on the banner. Dismissed banners are stored in browser's localStorage and won't appear again for that user. Default: false |
target | string | Glob pattern that determines which pages display the banner. Uses glob pattern matching to target specific pages or sections. If not specified, matches all pages. Note: When configuring banners in front matter, the Pattern examples:
Matching rules:
|
| color | string | The visual style tone of the banner. Controls the color scheme of the banner. Available colors:
|
| rbac | object | Map of teams to permission levels that determines who can see the banner. Controls the visibility of the banner based on the user's team membership. If specified, only users belonging to teams with at least read access will see the banner. For more information, see RBAC configuration. |
Add banners to your redocly.yaml file:
banner:
- content: This is **a great announcement.** [Button](https://redocly.com)
dismissible: true
target: blog/**
- content: Important update for all users
target: '**'
color: warningConfigure multiple banners for different sections:
banner:
- content: Check out our **new blog posts** this week!
dismissible: true
target: blog/**
- content: API documentation has been updated
target: api/**
- content: Site maintenance scheduled for this weekend
dismissible: true
target: '**'Control banner visibility based on team membership:
banner:
- content: "🔒 Please log in to see all content!"
color: warning
rbac:
anonymous: read
authenticated: noneIn this example, the banner is only visible to unauthenticated visitors (anonymous team).
Configure a banner in the front matter of a specific page:
---
banner:
- content: Introducing the miracle of documentation
---
# Example page
This is an example page.
## Resources
- **[Navigation elements](../navigation/index.md)** - Overview of navigation components and patterns
- **[Navbar configuration](./navbar.md)** - Configure the top navigation bar
- **[Footer configuration](./footer.md)** - Configure the footer section
- **[Custom styles](../branding/customize-styles.md)** - Customize banner appearance with CSS
- **[Configuration options](./index.md)** - Explore other project configuration options