Skip to content

How to create Vertical Tabs layout in WordPress?

Updated On : September 14, 2026By : Reading Time : 2 minutes

Key Takeaways

  • Tabs Tours in Nexter Blocks uses the Vertical layout to move tab titles into a side column, with Navigation Position set to Left or Right and up to 10 tabs in one block.
  • Vertical tabs suit wider content because the content panel fills the space next to the title column, and switching still happens without reloading the page.
  • Vertical tabs have limits on mobile width, long tab titles can widen the column, and the layout applies to the whole block so some tabs cannot be vertical while others are horizontal.
Table of Contents

Once a set of tabs has more than four or five titles, a horizontal strip starts to wrap and look untidy.

A vertical layout runs the titles down the side instead, which reads like a menu and leaves room for longer labels.

For every Tabs Tours setting in one place, see the Tabs Tours block guide.

LIVE BLOCK LINK

Before You Start

  • Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
  • Block to enable: Tabs Tours, switched on under Nexter > Blocks in your WordPress dashboard.
  • Your sections planned: one tab per section, and the block takes up to 10 tabs.

Steps

  1. Add the Tabs Tours block to your page and click Design from Scratch.
  1. Open the Content panel. Each item in Tabs is one tab — set its Title, and click Add Tab for more.
The Tabs repeater with a tab's Title field
  1. Set each tab’s Content Type and fill in its content.
The Content Type setting on a tab
  1. Open the Layout panel and set Layout to Vertical.
The Layout panel with Layout set to Vertical
  1. Set Navigation Position to Left or Right to choose which side the titles sit on.
The Navigation Position setting
  1. Adjust Nav Alignment if you want the titles aligned differently within that column, then publish.

How It Behaves

  • The titles become a column beside the content rather than a strip above it.
  • Navigation Position changes meaning with the layout: Horizontal offers Top and Bottom, Vertical offers Left and Right.
  • The content panel fills the space next to the column, so a vertical layout suits wide content better than a narrow sidebar would.
  • Switching still happens without reloading the page.

Limitations

  • A vertical column and a phone screen do not mix well — check the result at mobile width before publishing.
  • Long tab titles widen the column and eat into the content area.
  • The layout is set for the whole block, so you cannot have some tabs vertical and others horizontal.

Troubleshooting

The titles are still across the top

Layout is still on Horizontal. Change it first — Navigation Position only offers Left and Right once the layout is Vertical.

The tab column is too wide

Shorten the tab titles, or set the navigation width in the Style tab.

It looks cramped on a phone

That is the usual trade-off with vertical tabs. Keep the titles short, or use the horizontal layout for narrow screens.

Related Docs

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

Why do vertical tabs work better than horizontal tabs when there are many tab titles?

Vertical tabs keep the titles in a side column instead of forcing a long strip across the top, which helps once you have more than four or five titles. That layout reads more like a menu and leaves more room for longer labels. In Nexter Blocks, this is handled by the Tabs Tours block, so the content area stays beside the title column instead of getting crowded by wrapping tabs.

What do I need before creating vertical tabs in WordPress?

The Tabs Tours block needs to be enabled under Nexter > Blocks in your WordPress dashboard, and it works in the Free edition as well as with Nexter Blocks Pro. The page also assumes you have one tab planned per section, with up to 10 tabs in a single block. That matters because vertical tabs are easiest to manage when the content structure is already mapped out.

How do I switch a WordPress tab layout from horizontal to vertical?

The layout changes at the block level, not per individual tab. In the Tabs Tours block, open the Layout panel and set Layout to Vertical, then choose Left or Right under Navigation Position. That flips the titles into a side column and lets you control which side they sit on. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this behavior through the Tabs Tours block.

Can I use vertical tabs for wide content instead of a narrow sidebar?

Vertical tabs suit wide content better because the content panel fills the space next to the title column. That gives you more usable room than a narrow sidebar would. The trade-off is that long tab titles can eat into that content area, so shorter labels usually work better when the page has dense or wide sections.

Why are my tab titles still showing across the top?

That usually means the block is still set to Horizontal. Navigation Position only switches to Left or Right after Layout is changed to Vertical, so the layout setting has to come first. In other words, the position control depends on the layout mode, not the other way around.

What should I do if vertical tabs look cramped on mobile?

That cramped look is a known trade-off with vertical tabs on phone screens. Shorter titles help because long labels widen the column and squeeze the content area even more. If mobile readability matters more than side navigation, switching to horizontal layout for narrow screens is the cleaner choice. The page also recommends checking the result at mobile width before publishing.

Last reviewed: September 15, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53