The Tabs (HTML) block splits rich text into tabs. Each tab has a label and its own CKEditor panel. Use it when the content of every tab is written in the editor; when you want to put other page blocks (media, browse previews, sliders) inside tabs, use Tabs (Blocks) instead.
Adding the block
- Edit the page under Admin > Sites > (site) > Pages > (page).
- In the Add new block sidebar, click BlockSuite: Tabs (HTML).
- Optionally enter a Heading.
- Click Add tab for each tab, give it a Label and write its Content.
- Click Save.
A block with no tabs renders nothing on the public page.
Tab fields
| Field | Description |
|---|---|
| Label | Required. The text on the tab button. A tab with an empty label is dropped when the page is saved. |
| Content | Rich text edited in CKEditor, with the same toolbar as the core HTML block. |
| Default tab | Select Open this tab by default on the tab that should be open when the page loads. If none is selected, or the selected tab is removed, the first tab opens. |
Use the up and down arrows in the corner of each tab to reorder tabs, and Remove tab to delete one. The default selection follows the tab when it is moved.
On the public site
- The heading, if set, is rendered as an
<h2>above the tab list. - The tab list follows the WAI-ARIA tabs pattern:
role="tablist",role="tab"buttons androle="tabpanel"panels wired together witharia-controlsandaria-labelledby. Only the active panel is visible; the others carry thehiddenattribute. - Clicking a tab activates it. With keyboard focus on a tab, the left and right arrow keys move between tabs (wrapping at the ends), and Home and End jump to the first and last tab.
- The active panel can receive focus, so keyboard users can move from the tab list straight into its content.
Tab content is output as saved; the module does not rewrite or filter the HTML. Theme authors can restyle the tabs with the classes listed in Theming and Markup.