Interactive module

Tabs block

Accessible tabs — underline, pills or boxed, horizontal or vertical — with full keyboard support and links that open a specific tab.

Overview

The Tabs block organises content into panels, with a row (or column) of tab buttons to switch between them. Each panel is a Tab block that can hold any blocks. Tabs follow the official WAI-ARIA tabs pattern, so they work fully with the keyboard and screen readers, and a link to a tab’s anchor opens that tab.

At a glance

Block name: wpbb/tabs
Module: Interactive
Find it by searching: Tabs
Contains: Tab
Loads JavaScript on the site: Yes, a small script, only on pages that use this block

When and why to use it

Services, plans or features that visitors compare one at a time.
Product information: Description, Specifications, Reviews.
Code or instructions for different platforms.

Example scenarios

Agency: tabs “Strategy”, “Design”, “Development”, each with text and an image.
Docs: vertical tabs for “Windows”, “macOS”, “Linux” installation steps.

See it in action

These are live examples: real Tabs blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Underline, Pills and Boxed — Click the tabs or use the arrow keys.

Open in a new tab

How to add the Tabs block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Tabs in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Tabs in the results. The block appears with three sample tabs (Strategy, Design, Development).
Configure the content. Click a tab title on the canvas to rename it and to show its panel; edit the panel content below. Click the + at the end of the tab row to add a tab. To change a single tab’s icon or anchor, click Select this tab’s settings under the panel.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Tab titles

What it does: The labels on the tab buttons. Clicking a title also shows its panel in the editor.
What to enter or choose: Short labels (plain text).
How to use it: Click a title in the tab row and type.
When to use it: Always.
Example: “Description”, “Specifications”, “Reviews”.
Result: The buttons show your labels. An empty title is shown as “Tab 1”, “Tab 2”…

Add tab (+)

What it does: Adds a new tab at the end.
What to enter or choose: Click the + button at the end of the tab row.
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: When you need another panel.
Example: Add a fourth tab “Support”.
Result: A new tab and empty panel appear.

Select this tab’s settings

What it does: Selects the Tab block of the visible panel, so you can set its icon and anchor.
What to enter or choose: Click the link under the panel.
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: To add an icon or change a single tab.
Example: —
Result: The sidebar shows the Tab’s own settings.

Settings panel: Tabs

Style

What it does: The look of the tab buttons.
What to enter or choose: One of: Underline, Pills, Boxed.
Default: Underline
How to use it: Click one of the buttons in the group.
When to use it: Underline: minimal, with a coral line under the active tab. Pills: rounded buttons. Boxed: classic folder tabs joined to the panel.
Example: Pills for a pricing switcher.
Result: The tab bar changes.

Orientation

What it does: Tabs in a row above the panels, or in a column beside them.
What to enter or choose: One of: Horizontal, Vertical.
Default: Horizontal
How to use it: Click one of the buttons in the group.
When to use it: Vertical for many tabs or long labels.
Example: Vertical for six product categories.
Result: The tab list moves to the left side. On screens below 782px, vertical tabs are placed above the panel.

Tab alignmentShown when Orientation is Horizontal

What it does: How the tab buttons are spread across the row.
What to enter or choose: One of: Start, Center, Fill.
Default: Start
How to use it: Click one of the buttons in the group.
When to use it: Center for centred sections; Fill to make the tabs share the full width.
Example: Fill for three equal tabs.
Result: The buttons move or stretch.

Open tab on load

What it does: Which tab is open when the page loads.
What to enter or choose: One of your tabs (listed by title).
Default: The first tab
How to use it: Open the dropdown and pick an option.
When to use it: Normally the first; choose another to highlight it.
Example: Open “Yearly” first.
Result: That tab is selected on load. A link to another tab’s anchor still opens that tab.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Tabs offers.

Element: Tab selected first

Each tab button. Hover, Focus and Active (Active = the selected tab) states.

Styles-tab controls for “Tab”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal, Hover, Focus, Active
Colors	Text	—	Normal, Hover, Focus, Active
Background	Type	—	Normal, Hover, Focus, Active
	Color / Gradient	—	Normal, Hover, Focus, Active
	Image	—	Normal
Border	Border type	—	Normal, Hover, Focus, Active
	Border	—	Normal, Hover, Focus, Active
	Radius	Yes	Normal
	Focus indicator	—	Focus
Box Shadow	Remove shadow	—	Normal, Hover, Focus, Active
Box Shadow	Shadow layers	—	Normal, Hover, Focus, Active
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover, Focus, Active

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Active — Applies to the selected tab.

Element: Block

The whole block.

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Transform	Move X / Move Y	—	Normal
	Scale X / Scale Y	—	Normal
	Rotate (°), Rotate X (°), Rotate Y (°)	—	Normal
	Skew X (°) / Skew Y (°)	—	Normal
Effects	Opacity (%)	Yes	Normal
	State transition (ms)	—	Normal
	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Tab bar

The bar holding the buttons.

Styles-tab controls for “Tab bar”
Panel	Control	Per device	Available in states
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Spacing	Margin	Yes	Normal
Spacing	Padding	Yes	Normal

States: Normal only.

Element: Panel

The content panel.

Styles-tab controls for “Panel”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Background	Type	—	Normal
	Color / Gradient	—	Normal
	Image	—	Normal
Border	Border type	—	Normal
	Border	—	Normal
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal
Box Shadow	Shadow layers	—	Normal
Spacing	Padding	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

Horizontal tab rows scroll sideways when they do not fit. Vertical tabs move above the panel on screens narrower than 782px.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Font size, Line height, Letter spacing, Alignment, Radius, Padding, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, when your theme supports them.

How it works on your site

A small script (loaded only on pages with tabs) handles clicks and the keyboard. Hidden panels use hidden="until-found", so browser “Find in page” can still find their text and open the right tab.

Linking to a tab: give a Tab block an HTML anchor (e.g. pricing) and link to #pricing; the tab opens and scrolls into view.

Accessibility

Arrow keys move between tabs (Left/Right, or Up/Down for vertical tabs); Home and End jump to the first and last tab.
Only the selected tab is in the Tab order; Tab moves into the panel.
Screen readers announce the tab list, the selected tab and the number of tabs.

Tips and best practices

Keep tab labels short (one or two words).
Do not hide essential information in tabs other than the first one — some visitors never click.

Limitations and notes

Tab titles are plain text (no formatting); an icon can be added per tab.

Troubleshooting

My link to a tab does not open it.

Set the anchor on the Tab block (select it with “Select this tab’s settings”, then Advanced → HTML anchor) and link to #that-anchor.