Vertical Tabs Block

The Vertical Tabs block lets you organize related content into multiple tabs within a single section. Tab labels are stacked vertically on the left, with the active tab’s content displayed on the right.

Start here: watch the walkthrough (6 minutes)

Why use the Vertical Tabs block

Use the Vertical Tabs block when you want to group related content into a structured, interactive layout with clearly separated navigation. Vertical Tabs are especially helpful when each tab benefits from a short description in addition to the label — something that wouldn’t fit comfortably in a horizontal layout.

This layout works especially well when tab labels need more room — or when you want clearer separation between navigation and content. For a horizontal layout and a wider space for content, use the Horizontal Tabs block.

Common use cases include:

  • Feature or service details grouped by category
  • Policy sections or documentation with labeled subsections
  • Product details where short descriptions support each tab
  • Comparisons where readers may switch between content areas

Vertical Tabs are especially useful when each tab benefits from a short description in addition to a label. 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 Vertical Tabs block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Add and manage individual tabs
  • Enter a Label for each tab
  • Optionally add a Description beneath each tab label
  • Enter and edit content inside each tab
  • 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 preview or view the page on the front end to confirm spacing, layout, and visual behavior.

Managing and creating new tabs

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

  • Each tab includes a required Label and an optional Description, both displayed in the left-hand tab list.
  • Inside each tab is a Vertical 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.

Editing a tab label or description

Click directly on the tab Label to edit it. If needed, add or update the optional Description beneath the label.

Switching between tabs

Click a tab in the left column to view and edit that tab’s content.

Deleting a tab

Click the Trash icon next to the tab label 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
  • Keep tab Labels concise and descriptive
  • Use Descriptions to provide short context — not full content
  • 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 Vertical Tabs, including:

  • Carousel blocks
  • Horizontal Tabs blocks
  • More Vertical Tabs blocks

Block toolbar

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

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

Block settings

The Vertical 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 Vertical Tabs block (container) and Vertical 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 Vertical Tab block (content) has default padding applied. This can be adjusted in the block styles.

Use spacing settings to give the layout room to breathe.

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 Labels
  • Use Descriptions sparingly to provide helpful context
  • If content needs to be read top-to-bottom, a standard page layout may be a better choice

Used thoughtfully, Vertical Tabs create a clear, structured navigation experience within a single page section.