Metro Tabs is a free, lightweight WordPress block plugin that lets you organise content into clean, responsive tabs – right inside the block editor. Instead of stacking everything in one long page, you can group related sections behind clickable tabs so visitors can jump straight to what they need. It is built with vanilla JavaScript, has no jQuery dependency, and requires no setup or shortcodes.
What it does
Metro Tabs adds Gutenberg blocks so you can build tabbed content in posts and pages. Add a Tab Group block, then add Tab Item blocks inside it. Each tab has a clickable heading and a content area where you can add any blocks (text, images, lists, etc.). On the front end, visitors see a tab bar and panes; clicking a tab switches the visible content without reloading the page.
You can use multiple tab groups on the same page—each group is independent.
Features
- Tab Group block – A container for one set of tabs. Add as many Tab Group blocks as you need.
- Tab Item block – One tab: editable heading + content area that supports any blocks.
- No jQuery – Vanilla JavaScript only; no extra libraries.
- Block editor friendly – Block API version 3; works with the current WordPress block editor.
- Lightweight – Simple, discrete styling on the front end; easy to override with your theme or custom CSS.
How to use
- In the block editor, insert a Metro Tabs: Tab Group block (search for “Metro Tabs” or “Tab Group”).
- Inside the group, edit each Metro Tabs: Tab Item:
- Change the tab heading (the label on the tab).
- Add any blocks in the tab content (paragraphs, images, lists, etc.).
- Add or remove Tab Item blocks as needed. Add more Tab Group blocks elsewhere for other tab sets.
- Publish. On the front end, tabs work automatically: clicking a tab shows the corresponding content.
No configuration or settings are required.
Requirements
- WordPress 6.0 or higher
- PHP 8.0 or higher
When to use tabs
Tabs are a great way to keep a page tidy when you have several blocks of related but distinct information. Common uses include:
- Product details – split description, specifications, and reviews into separate tabs.
- Documentation and FAQs – group setup, usage, and troubleshooting without endless scrolling.
- Pricing or plan comparisons – show monthly vs. yearly options side by side.
- Service pages – let visitors switch between different services or audiences.
Frequently Asked Questions
Can I use more than one set of tabs on a page?
Yes. Add as many Tab Group blocks as you like – each group works independently of the others.
Does Metro Tabs work on mobile?
Yes. The tabs are responsive and adapt to smaller screens, and the styling is intentionally minimal so it inherits your theme’s look and is easy to override with custom CSS.
What can I put inside a tab?
Any blocks you want – paragraphs, images, lists, buttons, embeds, and more. Each Tab Item is a full content area, so the tab panes are as flexible as the rest of the block editor.