--- title: "How to create Vertical Tabs layout in WordPress?" url: https://nexterwp.com/docs/vertical-tabs-in-wordpress/ date: 2023-02-10 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/05/vertical-tabs-in-wordpress-1024x519.jpg word_count: 386 --- # How to create Vertical Tabs layout in WordPress? ## 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. 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](https://nexterwp.com/docs/add-tabs-on-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-tab-content/) ## 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 - Add the **Tabs Tours** block to your page and click **Design from Scratch**. - 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](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-tabs-list.webp) - Set each tab's **Content Type** and fill in its content. ![The Content Type setting on a tab](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-content-type.webp) - Open the **Layout** panel and set **Layout** to **Vertical**. ![The Layout panel with Layout set to Vertical](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-vertical.webp) - Set **Navigation Position** to **Left** or **Right** to choose which side the titles sit on. ![The Navigation Position setting](https://nexterwp.com/wp-content/uploads/2026/09/tabs-tours-nav-position.webp) - 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 - [Tabs Tours block: all settings](https://nexterwp.com/docs/add-tabs-on-wordpress/)- [Swipe through tab titles](https://nexterwp.com/docs/wordpress-tabs-with-swiper-effect/)- [Add an icon to a tab](https://nexterwp.com/docs/change-wordpress-tab-icon/) ## Frequently Asked Questions **Q: Why do vertical tabs work better than horizontal tabs when there are many tab titles?** A: 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. **Q: What do I need before creating vertical tabs in WordPress?** A: 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. **Q: How do I switch a WordPress tab layout from horizontal to vertical?** A: 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. **Q: Can I use vertical tabs for wide content instead of a narrow sidebar?** A: 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. **Q: Why are my tab titles still showing across the top?** A: 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. **Q: What should I do if vertical tabs look cramped on mobile?** A: 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.