Tabs
The Tabs widget lets you group related content into a tabbed interface within any documentation page. Readers switch between tabs without leaving the page, keeping your content organized without splitting it across separate sections or projects. When inserted, the widget starts with one tab by default — you add, rename, and populate tabs from directly within the editor.
Adding the Tabs Widget
Open the widget menu in the editor and select Tabs. The widget is inserted at your cursor position with a single empty tab ready to edit. Click inside the tab panel to begin adding content.
Content You Can Add Inside a Tab
Each tab panel supports the following content types.
Text | Add and format body text with bold, italic, bullet points, numbered lists, and inline formatting |
Callout | Highlight important information with a styled callout box (info, warning, success, or error) |
Table | Insert structured data tables to organize reference information clearly |
Image | Upload or insert images to visually support the tab's content |
Video | Embed video content relevant to the tab |
Code Block | Add syntax-highlighted code blocks for technical instructions or examples |
Divider | Insert a horizontal rule to visually separate sections within a tab panel |
Cards | Insert card and card group widgets to surface summaries or feature grids inside a tab |
Steps | Add a sequential step-by-step block for procedures and instructions inside a tab panel |
Accordion | Add collapsible accordion sections for FAQs or supplementary content within a tab |
Mermaid Diagram | Embed Mermaid-syntax diagrams — flowcharts, sequence diagrams, entity relationships, and more — rendered directly inside the tab panel |
iFrame | Embed external content or interactive tools via iFrame within a tab panel |
Managing Tabs
Adding a Tab
Click the plus icon on the tab bar to add a new tab. The new tab is appended to the right of the existing tabs and becomes active immediately. Click inside the panel to start adding content.
Renaming a Tab
Click the tab title to edit it inline.
Reordering Tabs
Hover over a tab to reveal the drag-and-drop handle. Click and drag the handle to reorder tabs within the tab bar.
Deleting a Tab
Select the tab you want to delete to make it active. The trash icon appears only on the currently active tab. Click it to delete the tab and all of its content.
More Actions
Duplicate
Creates a full copy of the entire Tabs widget — including all tabs, their titles, and all content within each panel. The duplicate is inserted directly below the original.
Delete
Removes the entire Tabs widget in a single action — all tabs and all content within them are permanently deleted. Use the trash icon on individual tabs to remove specific tabs without deleting the whole widget.
Published View
All tab content is rendered correctly in the published documentation view. Readers see the first tab selected by default and can switch between tabs using the tab bar. All formatting, embedded content, and nested widgets display exactly as authored in the editor.
What made this section helpful for you?
What made this section unhelpful for you?
On this page
- Tabs