--- title: "How to Add Tabs in WordPress (Block-Native, No Page Builder)" url: https://nexterwp.com/blog/how-to-add-tabs-in-wordpress/ date: 2026-07-28 modified: 2026-07-28 author: "Aditya Sharma" description: "How to add tabs in WordPress using blocks: what works today, what the native Tabs block in WordPress 7.1 changes, and when an accordion is the better fit." image: https://nexterwp.com/wp-content/uploads/2026/07/x7SrWAk93nQjtZgTSXpFyGC2Gy14kxtoJaVpjf9_3t3K9D2CAfTVSbLj1ahqWVpcAFDySFz8TEUCMa1izulYlQ-1024x538.png word_count: 2555 --- # How to Add Tabs in WordPress (Block-Native, No Page Builder) #### Key Takeaways - WordPress core has no Tabs block today. A native one arrives in WordPress 7.1, scheduled for August 19, 2026, and is already in Beta 1.- Until then, block-native tabs come from a block library. The Nexter Blocks Tabs Tours block covers horizontal and vertical layouts, tab icons and two content methods on the free tier.- The no-plugin route does not give you tabs. Core Details blocks sharing a Name attribute give you an accordion instead.- Google mobile-first guidance names tabs and accordions as acceptable, on the condition that the content matches your desktop version.- Use tabs for parallel options a reader compares side by side. Use an accordion for a long list of questions a reader skims.   Say you are building a pricing page with three plans. Each plan needs its own feature list, its own billing note and its own fine print. Stack all of that down the page and a reader has to scroll past two plans they do not care about to reach the one they do. Tabs solve exactly that: three labels, one panel visible at a time, no scrolling. So you open the block inserter, type `/tabs`, and nothing useful comes back. That is not a broken install. As of today, WordPress core genuinely does not ship a Tabs block. Tabs are the one everyday layout pattern core still leaves to plugins, and that is about to change. This guide covers what to use right now, what lands in core on August 19, and how to tell when tabs are the wrong choice. Table of Contents ## Does WordPress have a Tabs block? Not in stable WordPress, not yet. The short version: a native Tabs block exists, but it is still in beta. WordPress 7.1 Beta 1 shipped on July 15, 2026, and it introduces a Tabs block. The release announcement describes it as: > A new block for organizing content into clickable tabbed panels instead of showing everything at once. > > > WordPress 7.1 Beta 1 announcement, wordpress.org/news The scheduled final release date for WordPress 7.1 is **August 19, 2026**. Beta 1 is explicitly for testing and development, not for production websites, so this is not something to push to a live client site this week. ![WordPress 7.1 Beta 1 announcement on wordpress.org listing the new Tabs block](https://nexterwp.com/wp-content/uploads/2026/07/3VXBxosov6wWBY1WNzW5Ig_Jv66PBY9Jzmgjcnd8n4zL6oRQ7DaVct476UzbHixlY3oJPbiVGnYImV4wird47A-scaled.png)WordPress 7.1 Beta 1, released July 15, 2026, is where the native Tabs block first appears. Source: wordpress.org/news. If you want to see the block before release, the announcement lists four ways to test, all of which belong on staging rather than production: - Install the [WordPress Beta Tester](https://wordpress.org/plugins/wordpress-beta-tester/) plugin and choose the Bleeding edge channel with the Beta/RC Only stream. - Download the Beta 1 zip from wordpress.org and install it on a test site. - Run `wp core update --version=7.1-beta1` through WP-CLI. - Open a WordPress Playground instance in the browser, which needs no install at all. That leaves two practical answers for a live site today. Use a block library that already has a tabs block, or use core blocks and accept that what you get is an accordion rather than tabs. Both are covered below. ***Also Read:** [WordPress 7.1: What’s New and What Got Deferred](https://nexterwp.com/blog/wordpress-7-1/) for the full 7.1 feature list and what slipped again.* ## Method 1: Add tabs with the Nexter Blocks Tabs Tours block This is the route that works on a production site today, inside the block editor, with no page builder and no shortcodes. [Nexter Blocks](https://nexterwp.com/nexter-blocks/) is a Gutenberg block library from POSIMYTH with 90 plus blocks. Its free version is on WordPress.org as *Nexter Blocks* (plugin slug `the-plus-addons-for-block-editor`), currently version 5.0.2 with 10,000 plus active installs and a 96 out of 100 rating from 89 reviews. The tabs block is called **Tabs Tours** in the block library, and its documentation page titles it the Tab Content block. Same block, two names, which is worth knowing when you search for it. - Install and activate Nexter Blocks, then open the post or page where you want the tabs. - Click the block inserter and search for **Tabs Tours**. - Choose how the panels get their content. The **Content** option is the quick setup and keeps everything in one panel of fields. The **Editor** option gives you full control and lets you place other blocks inside each tab. - Name your tab titles. You can add an icon to each title for visual context. - Pick the layout. Horizontal puts the tab titles in a row above the panel, vertical stacks them down one side, which suits four or more tabs with longer labels. - Adjust the position of the tab titles so they line up with the rest of your section. - Preview on a phone before you publish. Tab strips are where narrow screens break first. ![Nexter Blocks Tabs Tours block page showing horizontal and vertical tab layout demos](https://nexterwp.com/wp-content/uploads/2026/07/qY4031lA7i8UJDo0oHFRDwuzsexONjdXl_PjblNcQ49aMLfVodYDL4u722TYG42pOOfO0nRMdYLfVj2jnVuZYA-scaled.png)The Tabs Tours block page lists 15 demo layouts, from nested tabs to pricing menus and contact form tabs. Everything in that list is in the free tier. The block also has a Pro tier, and it is worth being precise about the split rather than vague, because the Pro items are the ones people usually hit a wall on: - **Set a specific tab as the default active tab on load**, instead of always opening the first one. - **Link directly to a tab using a unique ID**, so you can send someone to the right panel from an email or another page. - **Choose click or hover** for how a tab opens. - **Add a swipe effect to horizontal tab titles** for mobile. - **Build panel content from a pattern** rather than the editor. - **Show an additional outer icon** in tab titles. - **Connect tabs with the Carousel Anything block** so the two move together. The deep-link item is the one to check before you commit. If your plan involves pointing a campaign at a specific tab, that behaviour sits in Pro. ***Also Read:** [5 Best Tab Plugins for WordPress Compared](https://nexterwp.com/blog/best-tab-plugins-for-wordpress/) if you would rather compare dedicated tab plugins before installing a full block library.* ## Method 2: The no-plugin route, and why it gives you an accordion Plenty of guides promise tabs in WordPress with no plugin. What they almost always build is an accordion, because that is what core can actually do. It is a genuinely useful pattern, so it is worth doing properly rather than pretending it is something else. Core has a **Details** block. It shows a summary line with an arrow, and reveals the content inside when clicked. Add one by typing `/details` in an empty paragraph and pressing enter. On its own, each Details block opens and closes independently. The setting that groups them is the **Name attribute**, added in WordPress 6.8 and found under Advanced in the block sidebar. The WordPress documentation puts it plainly: > Details blocks with the same name attribute work like an accordion: opening one closes the others in that group. > > > Details block documentation, wordpress.org, last updated July 23, 2026 ![WordPress Details block documentation page explaining the Name attribute accordion grouping](https://nexterwp.com/wp-content/uploads/2026/07/BEbovPWpRLHOe4ItzrEgl0QSY0Pa01JwQUxtxLRZDNv_qt5KPIjk4epfXwrm_byQVfLLeb_QXgk-6OW0WE1s9w-scaled.png)The Name attribute lives under Advanced in the Details block sidebar. It is what turns separate Details blocks into one accordion group. So give every Details block in the section the same Name attribute value, for example `plans`, and opening one closes the rest. Leave the field blank if you want each one independent. There is also an **Open by default** toggle if the first panel should start expanded, plus Color, Typography, Dimensions and Border controls under Styles. What you do not get is a tab strip. There is no row of labels along the top, and no single panel that swaps content in place. Panels open and close in a vertical stack. If the design calls for labels across the top, this method will not get you there, and no amount of CSS makes it a real tab interface without JavaScript. ***Also Read:** [How to Add an Accordion in WordPress (Block-Native, No Page Builder Needed)](https://nexterwp.com/blog/how-to-add-an-accordion-in-wordpress/) for the full Details block walkthrough, including accessibility notes.* ## What the core Tabs block will and will not cover Once 7.1 lands, the honest expectation is a solid structural block rather than a design system. Based on the beta announcement, the block organises content into clickable tabbed panels, and each panel holds full blocks rather than plain text. For a documentation page, a spec table or a simple pricing comparison, that is the whole job. Two other 7.1 changes matter more for tabs than they first appear. The release adds responsive styling without custom CSS, and interactive state styling. Tab strips are precisely where both of those usually turn into a stylesheet, so having them in core reduces the reason to reach for a plugin. What core is unlikely to hand you on day one is the behavioural layer: opening a specific tab from a URL, hover activation, swipe gestures on mobile, or syncing a tab set to a carousel. Those are the sort of options block libraries have built up over several years, and they are exactly the Pro items listed earlier. If your requirement is a tab strip with blocks inside it, wait for core. If your requirement includes deep links or hover, plan on a library either way. ![Nexter Blocks landing page showing the Gutenberg block library including the Tabbed category](https://nexterwp.com/wp-content/uploads/2026/07/zJHRcvfWJUoeUveCI3eBJLetulVaWg8gumQKJyRPQ6CL5FJpS6dEiAkjVJRod_QiFZ7mnwfXM8HrUc1XVmvY6g-scaled.png)Nexter Blocks groups Tabs Tours, Accordion, Switcher and Interactive Circle Info under one Tabbed category. ***Also Read:** [12 Best Gutenberg Plugins for WordPress](https://nexterwp.com/blog/best-gutenberg-plugins/) for a wider look at which block libraries are worth the weight.* ## Tabs or accordion: which one does the job This is the decision most people skip, then regret. The two patterns look interchangeable in a mockup and behave very differently in front of a reader. | If the content is... | Use | Why | | -------------------- | --- | --- | | Parallel options a reader compares, such as three pricing plans or Mac and Windows instructions | Tabs | Labels sit side by side, so the reader sees all the choices at once and picks one. | | A long list of questions a reader skims for the one that applies to them | Accordion | Vertical scanning is faster than reading a tab strip, and several can be open at once. | | More than about five sections with long labels | Accordion, or vertical tabs | A horizontal tab strip either wraps or scrolls, and both feel broken on mobile. | | Something a reader must not miss, such as pricing or a warranty limit | Neither | If it matters that much, leave it visible on the page. | Tabs and accordions solve different reading problems. Pick by how the reader will scan the section. There is also a mobile reality worth stating. On a narrow screen, a horizontal tab strip has to wrap, scroll or shrink, and none of those are pleasant. Vertical tabs and accordions degrade far more gracefully. That is the main reason the vertical layout option in the free tier is more useful than it sounds. ## Do tabs hurt your SEO? This question has a lot of folklore attached to it, so here is what Google actually documents. Its mobile-first indexing guidance addresses the pattern directly: > You can have a different design on mobile to maximize user experience (for example, moving content into accordions or tabs); just make sure that the content is equivalent to the desktop site, since indexing on your site comes from the mobile site. > > > Mobile-first indexing best practices, Google Search Central ![Google Search Central mobile-first indexing documentation on moving content into accordions or tabs](https://nexterwp.com/wp-content/uploads/2026/07/f0U91yaHN_4VX8iyaSq6gxyBoNtjUsnpeapJGExy4By3mUGd-uOXvPAEovVKfUNt57OXeItsSC7awS6wAtak1Q-scaled.png)Google's mobile-first indexing guidance names accordions and tabs directly, and sets content equivalence as the condition. So tabs are a sanctioned design choice, not a penalty. The condition is equivalence. The failure case is not "I used tabs", it is "the mobile version quietly dropped content the desktop version had", and tabs are simply a common way that happens. Two practical consequences. First, put the real content in the tab panels, in the page markup, rather than fetching it over JavaScript after the click. Second, do not treat a tab as a place to hide thin or duplicated copy. If a panel is not worth showing, it is not worth writing. One more thing that is easy to miss: a tab strip does not create headings. If your tab titles are the only labels for those sections, your page has no heading structure for them, which affects both a screen reader and an [automatically generated table of contents](https://nexterwp.com/blog/how-to-add-table-of-contents-in-wordpress/). Keep a real heading above the tab set describing what the reader is choosing between. ## Five mistakes to avoid with WordPress tabs - **Too many tabs.** Past about five, the strip stops being scannable. Split the section or switch to an accordion. - **Vague labels.** "More", "Details" and "Other" tell a reader nothing. Label by what is inside. - **Burying the thing they came for.** If a page exists to explain your pricing, pricing does not go behind a tab. - **Never testing the phone.** Tab strips break on narrow screens before anything else on the page does. - **Using tabs to shorten a page you should have cut.** Tabs hide length, they do not fix it. If a section only exists to hold keywords, deleting it beats hiding it. ## Should you wait for WordPress 7.1? A straight answer, split by situation. - **You need tabs on a live site this month.** Use a block library now. Waiting for August 19 and then waiting again for your host, theme and plugins to settle on a brand new major release is a long time to leave a page unfinished. - **You need a plain tab strip and can wait a few weeks.** Wait for core. Fewer moving parts, nothing extra to maintain. - **You need deep links, hover activation, mobile swipe or carousel syncing.** A library is the answer regardless of what core ships. - **You are on an older WordPress version.** Sort that out first. The Name attribute accordion method needs 6.8 or later, and the core Tabs block will need 7.1. Either way, build the section so the content does not depend on the mechanism. If the copy inside your panels is solid, swapping a library block for the core block later is a rebuild of the wrapper, not the writing. ## Suggested reading - [How to Add an Accordion in WordPress (Block-Native, No Page Builder Needed)](https://nexterwp.com/blog/how-to-add-an-accordion-in-wordpress/) - [5 Best Tab Plugins for WordPress Compared](https://nexterwp.com/blog/best-tab-plugins-for-wordpress/) - [WordPress 7.1: What’s New and What Got Deferred](https://nexterwp.com/blog/wordpress-7-1/) - [What is Gutenberg? A Beginners Guide to the WordPress Block Editor](https://nexterwp.com/blog/what-is-gutenberg/) - [How to Add a Pricing Table in WordPress (Step by Step, No Page Builder)](https://nexterwp.com/blog/multi-column-pricing-table-for-wordpress/) #### Stay updated with Helpful WordPress Tips, Insider Insights, and Exclusive Updates – Subscribe now to keep up with Everything Happening on WordPress! Subscribe ## Frequently asked questions ### Is there a tabs block in WordPress by default? Not in the current stable release. A native Tabs block is in WordPress 7.1 Beta 1, released July 15, 2026, and WordPress 7.1 is scheduled for final release on August 19, 2026. Until then you need a block library, or the core Details block if an accordion will do. ### How do I add tabs in WordPress without a plugin? You cannot build a true tab strip with core blocks today. What you can build is an accordion: add several Details blocks, then give each one the same Name attribute under Advanced so opening one closes the others. That needs WordPress 6.8 or later. ### Are tabs bad for SEO? No. Google mobile-first indexing guidance specifically allows moving content into accordions or tabs, provided the content is equivalent to the desktop version. Keep the panel content in the page markup rather than loading it after the click, and do not put content behind a tab that a reader needs to see. ### Should I use tabs or an accordion? Use tabs when a reader is comparing parallel options, such as pricing plans or platform-specific instructions, because the labels sit side by side. Use an accordion for a long list of questions someone skims, and whenever you have more than about five sections or need it to hold up on a narrow screen.