Horizontal Tabs Block

The Horizontal Tabs block lets you organize related content into multiple tabs within a single section. It’s a helpful way to present a large amount of information without forcing readers to scroll through everything at once.

Start here: watch the walkthrough (7 minutes)

Why use the Horizontal Tabs block

Use the Horizontal Tabs block when you want to group related content into a compact, interactive layout. This block is best used when content is closely related and readers may want to jump between sections to find what’s most relevant to them.

Common use cases include:

Feature or service details grouped by category
FAQs organized by topic
Product specifications or plans
Policies, requirements, or documentation sections
Comparisons where readers may want to switch views

Tabs work best when each section is meaningful on its own but clearly part of a larger whole.

How to use the block

Start by adding the Horizontal Tabs block to the page. Learn how to add blocks.

Once the block is added, editors typically:

Add and manage individual tabs
Enter and edit content inside each tab
Switch between tabs to review content
Adjust spacing and layout styles as needed

Because this is a more complex block, the editor experience is focused on building and managing tab content. The appearance in the editor may not exactly match the front-end display, so always review or view the page on the front end to confirm spacing, layout, and visual behavior.

Managing and creating new tabs

All content for the Horizontal Tabs block is created directly in the block editor.

Each tab has a visible tab label, which readers click to switch views on the front end.
Inside each tab is a Horizontal Tab inner block where content is added.
Each tab can contain any supported blocks.

Adding a new tab

Click Add New Tab to create an additional tab.

Renaming a tab

Click directly on the tab label.
Type to enter or update the tab name.

Switching between tabs

Click a tab label to view and edit that tab’s content.

Deleting a tab

Click the X icon on the tab you want to remove.

Building tab content

Each tab uses inner blocks, which means you can build layouts just like you would elsewhere in the editor.

Any block can be added inside a tab
Column blocks are commonly used for more complex layouts
Text, images, lists, and media all work well
Try to balance the amount of content across tabs so no single tab feels overwhelming

Blocks to avoid inside tabs

To prevent layout conflicts or unexpected behavior, avoid placing blocks with complex interactive layouts inside Horizontal Tabs, including:

Carousel blocks
More Horizontal Tabs blocks
Vertical Tabs blocks

When the Horizontal Tabs block is selected, the block toolbar includes:

Block width: Control how wide the tab container appears within the layout

Block settings

The Horizontal Tabs block does not include additional settings in the block settings sidebar.
The overall structure and behavior of the block are intentionally simple and controlled by the design system.

Block styles

The Horizontal Tabs block (container) and Horizontal Tab block (tab content) keep settings intentionally minimal.

Located in the block settings sidebar under the Styles tab.

Padding: Add space inside the tab container
Margin: Control space above and below the block
The Horizontal Tab block (content) has top and bottom padding applied by default. This can be adjusted in the block styles.

Use spacing settings to give the tabs room to breathe within the layout.

Tips for editors

Use tabs only for related content — not to hide unrelated sections
Keep the number of tabs manageable so the interface stays easy to use
Write clear, concise tab labels that help readers understand what they’ll find
If content needs to be read top-to-bottom, a standard page layout may be a better choice

Used thoughtfully, Horizontal Tabs can make dense content feel approachable and easy to navigate.