Tabs Block
Organise content into tabbed sections. Each tab has a label and content area. Readers can switch between tabs without scrolling. The default active tab is configurable.
Tabs present multiple content sections in a compact space, allowing readers to switch between views without scrolling. Use them when content can be logically grouped into parallel categories.
When to Use
Block Properties
| Property | Required | Description |
|---|---|---|
| Tabs | Yes | Array of tab items, each with label and content |
| Default Active Index | No | Which tab appears selected on page load (0-based index) |
Tab Item Properties
| Property | Required | Description |
|---|---|---|
| Label | Yes | The tab header text (always visible) |
| Content | Yes | Rich text content shown when the tab is selected |
Example: Installation Instructions
Platform-specific installation commands organised by operating system.
Example: Code Samples
The same API call demonstrated in different programming languages.
Example: User Roles
Different instructions based on the reader's role in the organisation.
Editing Tabs
| Action | How To |
|---|---|
| Select Tab | Click a tab header to select it and edit its content |
| Edit Label | Edit tab labels inline in the header area |
| Add Tab | Click the + button to add a new tab |
| Remove Tab | Hover over a tab and click the X to remove it (minimum one tab required) |
| Set Default | The currently selected tab becomes the default active tab when published |
Tabs vs Accordions
| Criteria | Choose Tabs | Choose Accordions |
|---|---|---|
| Selection Mode | Readers need one section at a time | Readers may need multiple sections open |
| Visibility | All options equally visible | Sections can vary in importance |
| Content Length | Sections are roughly similar length | Sections vary significantly in length |
| Section Count | Few sections that fit in tab bar | Many sections that would overflow |