Advanced Tabs
A tabbed content panel where each tab displays rich text content, ideal for organising related information in a compact layout.
Advanced Tabs
A tabbed content panel that lets content editors define multiple labelled tabs, each containing rich text (Strapi blocks). Visitors click tab labels to switch between content sections without leaving the page. An optional section heading and background styling are configurable through the CMS.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Dynamic" > "Advanced Tabs"
- Add an optional title, then create tabs by adding repeatable tab items with a label and rich text content
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| title | Component | No | Section heading displayed above the tab bar. |
| background | Component | No | Background styling for the entire section (colour, gradient, or image). |
| tabs | Component (repeatable) | No | Tab definitions -- see sub-fields below. |
Tabs Sub-fields
| Field | Type | Required | Description |
|---|---|---|---|
| label | String | Yes | The text displayed on the tab button. |
| content | Blocks | No | Rich text content shown when this tab is active. Supports headings, paragraphs, lists, images, and links. |
Variants
Default
A horizontal tab bar with the first tab selected by default. The active tab's content area smoothly transitions when switching. Tab labels are evenly spaced and highlight on hover and selection.
EmptyState
Shows the tab bar with no content when tabs are configured without rich text, or when no tabs are added at all.
NullableFields
Demonstrates the component with minimal configuration, showing fallback behaviour when optional fields like title and background are omitted.
Tips
- Keep tab labels short (1-3 words) so they fit comfortably on mobile without wrapping.
- Use 2-5 tabs for the best user experience -- too many tabs can overwhelm visitors on narrow screens.
- The first tab is always selected by default, so place the most important content there.
- Each tab's content supports full rich text, including images and embedded links -- use this to create self-contained content sections.
- Pair with a section title to give visitors context about what the tabs contain before they start clicking.