The Tabs (Blocks) container puts other page blocks inside tab panels. Any block that can be placed on a page can go in a tab: HTML, media, browse previews, lists of pages, sliders, and so on. The container works like a core Block group: it "spans" the blocks placed inside it in the editor, and BlockSuite: Tab divider blocks mark where each tab starts.
Building a tabbed section
- Edit the page under Admin > Sites > (site) > Pages > (page).
- In the Add new block sidebar, click BlockSuite: Tabs (Blocks). The block appears with an empty drop zone reading Drag blocks here. Start each tab with a "BlockSuite: Tab" block.
- Optionally give the container a Heading, shown above the tab list.
- Add a BlockSuite: Tab block and drag it (by its handle) into the drop zone. Enter its Tab label, for example Overview.
- Add the blocks that belong in that tab and drag them into the drop zone below the divider.
- Repeat steps 4 and 5 for each further tab.
- Click Save.
The tabs are defined purely by order inside the drop zone: a divider starts a tab, and everything after it until the next divider (or the end of the container) is that tab's content.
The Tab divider
| Field | Description |
|---|---|
| Tab label | The text on the tab button. If left empty the tab is labelled Tab 1, Tab 2 and so on by position. |
| Default tab | Tick Open this tab by default for the tab that should be open when the page loads. If several dividers are ticked, the first wins. If none is ticked, the first tab opens. |
The divider renders nothing itself. In the page editor its header shows the label live, as BlockSuite: Tab — Overview, and the block is accented with a blue left border so tab boundaries are easy to see when blocks are collapsed. A divider placed outside a Tabs (Blocks) container is ignored on the public page.
Intro blocks
Blocks placed inside the container before the first divider are rendered above the tab list, inside the container. Use this for a short introduction that should be visible whichever tab is open.
Nesting and limits
- A Tabs (Blocks) container can be placed inside another Tabs (Blocks) container, and inside a core Block group.
- A core Block group cannot be dropped into a Tabs (Blocks) container; the editor refuses the drop, as it does for block groups inside block groups.
- A Tabs (HTML) block inside a tab panel works normally; each tab list only controls its own panels.
- Removing the container with its Remove block icon also removes every block inside it, as the header warning Block and contents to be removed indicates. Drag blocks out of the container first if you want to keep them.
- On a page using the Grid layout, the container is positioned as a single grid cell using its own Position and Span (from Configure layout). The blocks inside are laid out within the tab panels, not on the page grid.
What happens when you save
The container stores how many blocks it spans; the editor recounts this every time a block is dragged in or out, and again on save, skipping blocks marked for deletion. Block order on the saved page is the order shown in the editor, with the container's blocks immediately after it.
On the public site
A container with a heading, intro blocks or at least one tab renders a tab list and panels with the same accessible markup and keyboard behaviour as Tabs (HTML). A container with nothing inside renders nothing at all.
The wrapper carries the bst-tabs-block bst-tabs-block--group classes; see Theming and Markup. Rendering is done by the module's pageLayout view helper override, described in Configuration.