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