Title: Metro Tabs – Vertical, Responsive & Linkable Tabs Block
Author: Ciprian Popescu
Published: <strong>12 Tháng 3, 2026</strong>
Last modified: 9 Tháng 10, 2026

---

Tìm kiếm plugin

![](https://ps.w.org/metro-tabs/assets/banner-772x250.png?rev=3481383)

![](https://ps.w.org/metro-tabs/assets/icon-256x256.png?rev=3481383)

# Metro Tabs – Vertical, Responsive & Linkable Tabs Block

 Bởi [Ciprian Popescu](https://profiles.wordpress.org/butterflymedia/)

[Tải về](https://downloads.wordpress.org/plugin/metro-tabs.zip)

 * [Chi tiết](https://vi.wordpress.org/plugins/metro-tabs/#description)
 * [Đánh giá](https://vi.wordpress.org/plugins/metro-tabs/#reviews)
 * [Nhà phát triển](https://vi.wordpress.org/plugins/metro-tabs/#developers)

 [Hỗ trợ](https://wordpress.org/support/plugin/metro-tabs/)

## Mô tả

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.
     * Add any blocks in the **tab content** area (paragraphs, images, etc.).
 4. Select the Metro Tabs block to choose the orientation, accordion breakpoint, animation,
    links and style.
 5. Publish or update. You can use several Metro Tabs blocks on the same page.

Explore more [WordPress Plugins](https://getbutterfly.com/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](https://getbutterfly.com/wordpress-plugins/active-contacts/)
 * [LazyClone – Copy a WordPress Site Without FTP](https://getbutterfly.com/wordpress-plugins/lazyclone/)
 * [Lighthouse – WordPress Performance & Speed Optimization Plugin](https://getbutterfly.com/wordpress-plugins/lighthouse/)
 * [Active Analytics – Privacy-Friendly WordPress Analytics Plugin](https://getbutterfly.com/wordpress-plugins/active-analytics/)
 * [ImagePress – WordPress Image Gallery & Community Photo Plugin](https://getbutterfly.com/wordpress-plugins/imagepress/)
 * [eCards – WordPress eCard Plugin with Email Designer](https://getbutterfly.com/wordpress-plugins/wordpress-ecards-plugin/)
 * [Repeater for Gravity Forms – Repeater Field Add-on](https://getbutterfly.com/wordpress-plugins/gravity-forms-repeater-plugin/)
 * [Fixtures & Results – WordPress Sports League & GAA Club Plugin](https://getbutterfly.com/wordpress-plugins/fixtures-and-results/)
 * [WP Google Consent Platform (GCP)](https://getbutterfly.com/wordpress-plugins/wp-gcp-a-wordpress-plugin-for-google-consent-mode-v2/)

## Ảnh màn hình

[⌊Front-end tabs⌉⌊Front-end tabs⌉[

Front-end tabs

[⌊Front-end tabs⌉⌊Front-end tabs⌉[

Front-end tabs

[⌊Front-end tabs⌉⌊Front-end tabs⌉[

Front-end tabs

[⌊Back-end block editor with Tab Group and Tab Item blocks⌉⌊Back-end block editor
with Tab Group and Tab Item blocks⌉[

Back-end block editor with Tab Group and Tab Item blocks

[⌊Back-end block editor with Tab Group and Tab Item blocks⌉⌊Back-end block editor
with Tab Group and Tab Item blocks⌉[

Back-end block editor with Tab Group and Tab Item blocks

[⌊Source code demonstrating ARIA roles and keyboard navigation attributes⌉⌊Source
code demonstrating ARIA roles and keyboard navigation attributes⌉[

Source code demonstrating ARIA roles and keyboard navigation attributes

## Đánh giá

Không có đánh giá nào cho plugin này.

## Người đóng góp & Lập trình viên

“Metro Tabs – Vertical, Responsive & Linkable Tabs Block” là mã nguồn mở. Những 
người sau đã đóng góp vào plugin này.

Những người đóng góp

 *   [ Ciprian Popescu ](https://profiles.wordpress.org/butterflymedia/)

[Dịch “Metro Tabs – Vertical, Responsive & Linkable Tabs Block” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/metro-tabs)

### Muốn tham gia phát triển?

[Duyệt code](https://plugins.trac.wordpress.org/browser/metro-tabs/), check out 
[SVN repository](https://plugins.svn.wordpress.org/metro-tabs/), hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/metro-tabs/)
qua [RSS](https://plugins.trac.wordpress.org/log/metro-tabs/?limit=100&mode=stop_on_copy&format=rss).

## Nhật ký thay đổi

#### 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

## Meta

 *  Phiên bản **1.2.0**
 *  Cập nhật lần cuối **3 ngày trước**
 *  Số lượt cài đặt **100+**
 *  Phiên bản WordPress ** 7.1 hoặc cao hơn **
 *  Đã kiểm tra lên đến **7.1.3**
 *  Phiên bản PHP ** 8.0 hoặc cao hơn **
 *  Ngôn ngữ
 * [English (US)](https://wordpress.org/plugins/metro-tabs/)
 * Thẻ
 * [Accordion](https://vi.wordpress.org/plugins/tags/accordion/)[responsive](https://vi.wordpress.org/plugins/tags/responsive/)
   [tabs](https://vi.wordpress.org/plugins/tags/tabs/)[tabs block](https://vi.wordpress.org/plugins/tags/tabs-block/)
   [vertical tabs](https://vi.wordpress.org/plugins/tags/vertical-tabs/)
 *  [Nâng cao](https://vi.wordpress.org/plugins/metro-tabs/advanced/)

## Đánh giá

Chưa có đánh giá nào được gửi.

[Your review](https://wordpress.org/support/plugin/metro-tabs/reviews/#new-post)

[Xem tất cả đánh giá](https://wordpress.org/support/plugin/metro-tabs/reviews/)

## Những người đóng góp

 *   [ Ciprian Popescu ](https://profiles.wordpress.org/butterflymedia/)

## Hỗ trợ

Có điều gì muốn nói? cần giúp đỡ?

 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/metro-tabs/)

## Ủng hộ

Bạn có muốn hỗ trợ vào sự phát triển của plugin này?

 [ Ủng hộ plugin này ](https://buymeacoffee.com/wolffe)