Metro Tabs – Vertical, Responsive & Linkable Tabs Block

WordPress 7.1 added a basic Tabs block. Metro Tabs uses the same accessible tabs pattern and adds what Core doesn't do:

• Vertical tabs – tab list on the side, with Up/Down arrow keys.
• Accordion on mobile – below a width you choose, the tabs turn into an accordion.
• Shareable links – optionally update the address bar when a tab opens, so every tab has its own #link. Links work on page load and when the hash changes.
• Remember the last tab a visitor opened on a page.
• Icons in tab labels (Dashicons).
• Style presets – Metro (underline), Pills, Boxed and Segmented, plus Color, Typography and Spacing panels.
• Fade or slide panel animation, switched off for visitors who prefer reduced motion.
• Style pack for core Tabs – the same four presets for the core Tabs block.
• No lock-in – transform Metro Tabs to core Tabs and back.
• Tabs are rendered on the server, so there is no flash of unstyled content, and the small script only loads on pages with tabs.

Add a Metro Tabs block, then edit the Tab Item blocks inside it. Each tab has a heading (the label visitors click) and a content area that takes any blocks. How to use

1. In the block editor, add a Metro Tabs block (search for “Metro Tabs” or “tabs”).
2. Inside it, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click each Metro Tabs: Tab Item block and:
3. Edit the tab heading (the text shown on the tab) and, optionally, pick an icon in the sidebar.
4. Add any blocks in the tab content area (paragraphs, images, etc.).
5. Select the Metro Tabs block to choose the orientation, accordion breakpoint, animation, links and style.
6. Publish or update. You can use several Metro Tabs blocks on the same page.

Explore more WordPress Plugins. Compatibility

• Requires WordPress 7.1 or higher.
• Requires PHP 8.0 or higher.

From the same author

• Active Contacts - WordPress CRM & Follow-up Plugin
• LazyClone - Copy a WordPress Site Without FTP
• Lighthouse - WordPress Performance & Speed Optimization Plugin
• Active Analytics - Privacy-Friendly WordPress Analytics Plugin
• ImagePress - WordPress Image Gallery & Community Photo Plugin
• eCards - WordPress eCard Plugin with Email Designer
• Repeater for Gravity Forms - Repeater Field Add-on
• Fixtures & Results - WordPress Sports League & GAA Club Plugin
• WP Google Consent Platform (GCP)

1.2.1

• FIX: Tab items saved with the generated block class, or with a shortcode typed into the tab body, no longer fail block validation in the editor

1.2.0

• FEATURE: Vertical tabs (Up/Down arrow keys, aria-orientation="vertical")
• FEATURE: Accordion below a chosen screen width
• FEATURE: Optional address bar update on tab change, and remember the last opened tab
• FEATURE: Dashicons in tab labels
• FEATURE: Style presets (Metro, Pills, Boxed, Segmented), Color, Typography, Spacing and anchor support
• FEATURE: Fade/slide panel animation (respects reduced motion)
• FEATURE: Style pack for the core Tabs block, and transforms between Metro Tabs and core Tabs
• PERFORMANCE: Tabs are rendered on the server (no layout shift); the script is a small ES module loaded only on pages with tabs; the stylesheet only loads with the block
• UPDATE: The tab list is now a div of buttons instead of ul/li. Existing tab links (#metrotabs-g0-...) keep working. Update any custom CSS that targeted .metro-tabs-block ul li
• UPDATE: Tab items saved outside a tab group (very old content) render as a native disclosure
• UPDATE: Requires WordPress 7.1

1.1.7

• UPDATE: Tested up to WordPress 7.1
• DOCS: Add WordPress Plugins directory and donation link

1.1.6

• UPDATE: Tested up to WordPress 7.1
• DOCS: Add WordPress Plugins directory and donation link

1.1.5

• Add WAI-ARIA Tabs pattern (roles, states, and properties)
• Add keyboard navigation (Arrow keys, Home, End) with automatic activation
• Add roving tabindex and visible focus styles for keyboard users
• Rename .simple-tabs-block CSS class to .metro-tabs-block

1.1.4

• Rename all internal references from TabX to Metro Tabs
• Rename asset files to use metrotabs prefix
• Add docblocks for all PHP functions

1.1.3

• Use plugin_dir_path() and plugin_dir_url() for correct path/URL resolution
• Remove updater
• Shorten readme short description
• Add version and $in_footer to enqueued scripts and styles

1.1.2

• Fixed plugin name

1.1.1

• Fixed block registration

1.1.0

• First release