Tabs
The Tabs widget groups parallel content into a tabbed interface on a single page, so readers switch between related views without scrolling or leaving the page.
Adding the Tabs widget
Open the widget menu and select Tabs. The widget appears at your cursor with a single empty tab ready to edit. Click inside the panel to start adding content.
What you can put in a tab
Tab panels hold almost any content, including other widgets. The live example below is itself a Tabs widget, switch between the tabs to see a few content types in action.
Plain and formatted text, with everything you would expect from a rich editor.
- Format with bold, italic, and inline code
- Build ordered and unordered lists
- Add links to anywhere
Highlight what matters with a styled callout, right inside the tab.
This callout lives inside a tab. Callouts come in info, warning, success, and error styles.
Drop in syntax-highlighted code blocks for examples and snippets.
theneo deploy --project docsTabs can also hold richer widgets:
- Cards and card groups
- Steps and accordions
- Tables and dividers
- Images, video, Mermaid diagrams, and iFrames
Managing tabs
Add a tab: click the plus icon on the tab bar. The new tab is appended to the right and becomes active.
Rename a tab: click the tab title to edit it inline.
Reorder tabs: hover a tab to reveal its drag-and-drop handle, then drag to reposition.
Delete a tab: select the tab to make it active. The trash icon appears on the active tab only; click it to delete the tab and its content.
More actions
Duplicate
Creates a full copy of the entire Tabs widget, all tabs, titles, and content, inserted directly below the original.
Delete
Removes the entire Tabs widget in one action. To remove a single tab instead, use the trash icon on that tab.
Published view
All tab content renders correctly in the published documentation. Readers see the first tab selected by default and switch using the tab bar. Formatting, embedded content, and nested widgets display exactly as authored.
On this page
- Tabs