The Tabs block displays content in a tabbed interface that automatically converts to an accordion on smaller screens. Perfect for organizing related content where users want to quickly switch between sections.
Why Use Tabs?
Quick Navigation: Tab headers are always visible, letting users jump directly to any section without scrolling.
Compare Content: Unlike accordions, tabs make it easy to switch back and forth between sections.
Responsive by Default: Automatically converts to an accordion on mobile where horizontal tabs don’t fit.
Adding a Tabs Block
Edit a page or create a new one
Click + to add a block
Search for “Tabs”
Insert the block
The block starts with one tab. Click the + button in the tab bar to add more tabs.
Tabs Block Settings
Initial Open Panel
Select which tab starts active when the page loads. Choose from the list of your tab titles.
In Multi layout mode, you can have multiple panels open on page load. Perfect for showing related sections users typically need together.
This panel was set to open by default when the page loads. Use this to highlight important information or guide users to the most relevant content first.
This panel was set to open by default when the page loads. Use this to highlight important information or guide users to the most relevant content first.
Tab Spacing
Gap between tabs in pixels. Adjust to control how close or spread apart the tab buttons appear.
Adjust to control how close or spread apart the tab buttons appear.
Adjust to control how close or spread apart the tab buttons appear.
Adjust to control how close or spread apart the tab buttons appear.
Layout Variations
Select a variation to control tab bar position and alignment:
Tabs: Full-width horizontal tabs that stretch to fill the container
Tabs Start: Horizontal tabs aligned to the left
Tabs Center: Horizontal tabs centered in the container
Tabs End: Horizontal tabs aligned to the right
Side Tabs: Vertical tabs on the left, content on the right
Side Tabs End: Vertical tabs on the right, content on the left
Tabs stretch to fill the entire container width. Each tab grows proportionally, creating a balanced, full-width navigation bar.
Works great when you have a few tabs and want them to feel substantial and evenly spaced.
Tabs align to the start of the container. Natural reading flow for LTR languages – your first tab sits where the eye lands first.
Tabs only take the space they need, leaving room on the right.
Tabs group together in the center of the container. A balanced, symmetrical look that draws focus to the middle of the layout.
Great for landing pages or when tabs are the main attraction.
Tabs align to the end of the container. Useful for layouts where navigation sits opposite to other elements like titles or buttons.
In RTL languages, this becomes left-aligned automatically.
Tabs stack vertically on the left, content displays on the right. Ideal for longer tab labels or when you have many tabs to display.
Mimics a traditional sidebar navigation pattern. Content area gets more horizontal space.
Tabs stack on the right, content on the left. Flips the typical sidebar pattern for unique layouts or RTL-first designs.
When LTR/RTL switches, this mirrors to the opposite side automatically.
Text Direction
Controls text direction for RTL (right-to-left) language support. When set to RTL, the entire accordion layout mirrors—icons and text align to the right.
Icon position start
Icon position start
Icon position end
Icon position end
Hiden icon
Hiden icon
Icon position start
Icon position start
Icon position end
Icon position end
Hiden icon
Hiden icon
Responsive Accordion Settings
These settings control behavior when the Tabs block converts to accordion mode on smaller screens.
Toggle Behavior
Never – Always display as tabs, even on mobile. Use only if you have very few, short-labeled tabs.
Responsive – Convert to accordion below a chosen breakpoint. This is the default and recommended setting.
Toggle At
(Available when Toggle Behavior is Responsive)
Choose which breakpoint triggers the switch from tabs to accordion:
Tablet – Switch at tablet width and below (default)
Laptop – Switch at laptop width and below
Desktop – Switch at desktop width and below
Large Desktop – Only show tabs on very large screens
Icon Settings
Show Icon – Toggle the expand/collapse indicator on or off.
A clean, minimal look without visual indicators. The entire header is still clickable – users just won’t see an icon hinting at the expand/collapse action.
A clean, minimal look without visual indicators. The entire header is still clickable – users just won’t see an icon hinting at the expand/collapse action.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icons provide a clear visual cue that content can be expanded. Choose from chevrons, plus/minus, carets, and more – positioned at the start or end of the header.
Icon Style – Choose from 6 icon animations:
Style
Collapsed
Expanded
Chevron Down
Points down
Rotates to point up
Chevron Side
Points right
Rotates to point down
Plus / X
Plus sign
Rotates 45° to X
Plus / Minus
Plus sign
Changes to minus
Caret
Filled triangle down
Rotates to point up
Caret Side
Filled triangle right
Rotates to point down
Points down, Rotates to point up
Points down, Rotates to point up
Points right, Rotates to point down
Points right, Rotates to point down
Plus sign, Rotates 45° to X
Plus sign, Rotates 45° to X
Plus sign, Changes to minus
Plus sign, Changes to minus
Filled triangle down, Rotates to point up
Filled triangle down, Rotates to point up
Filled triangle right, Rotates to point down
Filled triangle right, Rotates to point down
Icon Background – None, Fill (solid background), or Outline (border only)
Icon stands alone without any container. Clean and minimal – lets the icon speak for itself.
Icon stands alone without any container. Clean and minimal – lets the icon speak for itself.
Icon sits inside a filled container. Adds visual weight and makes the toggle action more prominent.
Icon sits inside a filled container. Adds visual weight and makes the toggle action more prominent.
Icon wrapped in a bordered container. Subtle definition without the heaviness of a solid fill.
Icon wrapped in a bordered container. Subtle definition without the heaviness of a solid fill.
Icon Position – Start | End | Hide
Icon appears before the title. A familiar pattern that draws the eye to the toggle action first.
Icon appears before the title. A familiar pattern that draws the eye to the toggle action first.
Icon appears after the title. Keeps focus on the content with the toggle indicator as a secondary element.
Icon appears after the title. Keeps focus on the content with the toggle indicator as a secondary element.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Icon position respects text direction. Set your text to RTL and the layout automatically mirrors – no extra settings needed.
Spacing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at est finibus, laoreet turpis non, laoreet eros. Aliquam pharetra lacinia est, in tincidunt orci molestie ac. Nullam rutrum mi quis enim euismod.
Gap – Space between accordion panels
Tabs Panel Settings
Each panel has its own settings:
Tab Label – Edit by clicking the tab button or the label in the panel. Keep labels short—they need to fit in the tab bar.
Panel Content – Add any WordPress blocks inside.
Panel Spacing
Padding – Controls spacing inside the panel content area
Styling
Color Settings
Found in the Color panel (half-moon icon):
Active Text Color – Text color for the selected tab
Active Background Color – Background for the selected tab
Inactive Text Color – Text color for unselected tabs
Inactive Background Color – Background for unselected tabs
These colors apply to both tabs mode and accordion mode.
Typography
Control tab label appearance:
Font family
Font size
Font weight
Line height
Letter spacing
Text transform
Text decoration
Dimensions
Margin – Vertical spacing around the entire tabs block
Padding – Padding for tab buttons (affects both tabs and accordion modes)
Block Spacing – Vertical spacing between each accordion sections
Shadow
Apply a box shadow to the tabs container.
Keyboard Navigation
The Tabs block is fully keyboard accessible:
In Tabs Mode
Key
Action
Tab
Move into/out of the tab list
Arrow Left / Arrow Up
Move to previous tab (auto-activates)
Arrow Right / Arrow Down
Move to next tab (auto-activates)
Home
Jump to first tab
End
Jump to last tab
In Accordion Mode
Key
Action
Tab / Shift+Tab
Move between panel headers
Enter or Space
Expand/collapse focused panel
Arrow Up / Arrow Left
Move to previous panel (auto-activates)
Arrow Down / Arrow Right
Move to next panel (auto-activates)
Home
Jump to first panel
End
Jump to last panel
Escape
Close current panel
RTL Support: Arrow key directions automatically reverse when using RTL direction.
Accessibility
The Tabs block follows WAI-ARIA authoring practices:
Tabs Mode:
role="tablist", role="tab", role="tabpanel"
aria-selected indicates active tab
aria-controls and aria-labelledby link tabs to panels
Accordion Mode:
aria-expanded indicates panel state
aria-controls links headers to content
Focus management and visible focus states
Tabs vs Accordion: When to Use Each
Use Tabs When…
Use Accordion When…
Users need to compare or switch frequently
Users typically need only one section
You have 2-5 sections
You have many sections (6+)
Tab labels are short
Section headers are longer/descriptive
Content sections are similar in length
Content varies significantly in length
Desktop is the primary device
Mobile is equally important
Best of Both: The Tabs block gives you tabs on desktop and accordion on mobile—the best experience for each device.
Example Use Cases
Product Information: Features, specifications, reviews, and Q&A in separate tabs.
Pricing Plans: Compare different tiers side by side.
Multi-Step Content: Instructions that users might need to reference back and forth.