The Blocksify Tabs block organizes content into tabbed panels with labels, optional icons, subtitles, positions, and tab styling. It auto-creates Tab child blocks for panel content, and the parent owns the tab metadata.
At a glance
| Parent block | blocksify/tabs |
| Child block | blocksify/tab |
| Default insertion | Creates 3 Tab children and opens the first tab. |
| Tab positions | Top, right, bottom, and left. |
| Tab details | Labels, subtitles, icons, and tab anchors are edited from the Tabs parent. |
| Key supports | Parent visibility, responsive tab layout, tab icons, subtitles, tablist styling, tab styling, active-tab styling, tab-content styling, and child panel controls. |
Where to find it
- Select the Tabs parent block on the canvas.
- Use General for tab position, width, gap, spacing, overflow, distribution, alignment, and default active tab.
- Select a Tab child when one panel needs its own color, background, spacing, border, size, or overflow treatment.
When to use it
Use Tabs when several related panels should share one visible area and visitors need to switch between them. Each Tab child can hold arbitrary inner blocks, so panels can contain text, media, layout blocks, or other content.
Wrap Tabs in a Section block when the tabbed area needs a larger page-band layout or full-bleed treatment.
For a search results page with tabs for different post types, see the Search Kit overview. Search Tabs needs Blocksify Pro.
Parent and Tab child structure
Tabs is a locked parent-child pair. The parent allows only Tab children, and each Tab child is the panel that holds the visitor-facing content.
| Surface | What it owns |
| Tabs parent | Active tab state, title entries, labels, subtitles, icons, tab anchors, tab layout, and shared tab styling. |
| Tab child | Panel content plus optional per-panel color, background, spacing, border, size, and overflow controls. |
| Toolbar | Move, add, duplicate, delete, and icon-pick actions for the active tab. |
Labels, subtitles, and icons
Tab labels and subtitles are edited inline on the tablist and saved with the Tabs parent. Subtitle fields appear only when Subtitle is enabled.
Tab icons are enabled by the parent Icon panel. Choose Lucide icons from the picker, paste custom SVG code, or upload a custom icon.
| Icon control | What it changes |
| Position | Left, top, or right placement inside every tab. |
| Vertical Alignment | Top, center, or bottom alignment when the icon is left or right. |
| Icon Size | Responsive icon dimensions. |
| Icon Gap | Responsive spacing between the icon and tab text. |
Position and device behavior
Tab Position can be top, bottom, left, or right. Top and bottom render a horizontal tablist, while left and right render a side rail beside the active panel.
Layout values use Tablet and Mobile suffixes and inherit until a smaller device overrides them. If a left or right rail reaches Mobile with no explicit Mobile Tab Position, Blocksify auto-collapses it to top plus stack at the mobile breakpoint; Tablet is unaffected.
| Control | What it controls |
| Tab List Width | Side-rail width for left and right positions. |
| Tab Gap | Spacing between the tablist and content. |
| Tab Spacing | Spacing between tab buttons, including wrapped rows. |
| Tab Width and Align | Distribution and alignment for top or bottom tab strips. |
| Tab Overflow | Scroll, wrap, stack, or carousel behavior for top or bottom strips. |
Carousel overflow uses decorative edge chevrons that page one tab at a time. The chevrons are not in the tab order because the keyboard can already reach every tab.
Frontend accessibility behavior
On the frontend, the tablist uses role="tablist", tabs use role="tab", and panels use role="tabpanel". The active tab updates aria-selected, panel visibility, and roving tabindex. The active panel is visible as soon as the page loads, before any script runs.
The Interactivity API handles click activation and keyboard navigation. Horizontal tablists use Left and Right arrow keys; vertical tablists use Up and Down; Home and End move to the first or last tab.
Style capabilities
The parent uses styling sections for repeated tab surfaces. The child Tab keeps its own visual controls for cases where one panel needs a different style.
| Panel or section | What it controls |
| Tabs Styling: Tab List | The tablist wrapper. |
| Tabs Styling: Tab | Each tab button surface. |
| Tabs Styling: Tab Active | The active tab state, seeded with an editable background tint and radius. |
| Tabs Styling: Tab Content | The shared panel content surface. |
| Subtitle | Subtitle text styling when subtitles are enabled. |
| Icon and Icon Active | Icon styling when icons are enabled. |
| Tab child controls | Per-panel color, background, spacing, border, size, and overflow. |
Tips
- Keep labels short when using top or bottom strips with many tabs.
- Use stack overflow on smaller screens when a horizontal strip would hide too many tabs.
- Use the parent Tabs Styling slices for the shared look, then select a Tab child only when one panel needs a unique style.
- Use toolbar move, add, duplicate, and delete actions so titles and child panels stay in sync.