Skip to main content
Support

Using the Tabs Block

Put alternative versions of the same instructions behind horizontal tabs, so readers pick the one that applies instead of scrolling past the rest.

Rebecca Thompson
Updated by Rebecca Thompson
3 min read
View as Markdown
Table of Contents

The Tabs block helps you put several pieces of content side by side. Your reader picks which one to look at.

What should I use a tab for? πŸ€”

Mac and Windows instructions, one section per plan, a snippet in three languages: anything where most readers only need one of the options and shouldn't have to scroll past the others to find it.

Tabs are for content that's parallel. If your sections run in sequence, use Steps. If the right section depends on an answer the reader gives you, use a Decision Tree.

Adding a Tabs Block

Type / anywhere in an article and pick Tab icon Tabs. /tabs, /tabbed, and /panels all find it. Each tab is two pieces that stay paired:

Part

What It's For

Label

The button in the bar along the top. Keep it to a word or two. It has to fit alongside the others

Panel

The content shown when that label is picked. A panel takes any blocks you like, including images, code, and callouts. Just hit / to find out

Leave a label empty and it saves as Tab 1, Tab 2 and so on. That's a safety net, not a feature, and readers can't tell your tabs apart from a numbered bar. Name them.

Building a Tabs Block

A new Tabs block comes with one empty tab ready to go.

  1. Click the first label in the new block and type its name
  2. Click into the panel below and add your content
  3. Click + Add tab at the end of the bar
  4. Repeat until every option has its own tab

Hover a label to reveal its controls:

Control

What It Does

Drag handle

Reorders the tab. The panel moves with its label, so content never ends up under the wrong heading

Delete tab

Removes the label and its panel together

Keyboard Shortcuts

Tabs have their own navigation, so you can build one without reaching for the mouse:

Keys

What It Does

Tab / Shift+Tab

Moves from a label into its panel, then on to the next tab. At either end you step out of the block

Enter or ↓ in a label

Drops into that tab's panel

Alt+← / Alt+β†’

Adds a new tab before or after the one you're in, and puts your cursor in its label

← / β†’ in a label

At the start or end of the text, hops to the neighbouring label

Cmd/Ctrl+A

Selects just the label or panel you're in, not the whole article

Limits

A block holds up to 10 tabs. In practice the bar gets crowded well before that, especially on a phone, so treat anything past five or six as a prompt to check whether the tabs are really parallel options or a list in disguise.

What Readers Get

Tabs are built with plain CSS and no JavaScript, so they work on every theme and never wait on a script to become clickable.

Tabs print well. When someone prints or PDFs the article, the tab bar disappears and every panel is shown stacked down the page, so nothing hidden behind a tab is lost on paper. That makes Tabs the safer choice for content that also has to work as a printed reference.

For the rest of the toolbox see Understanding Block Types, or Shortcuts in the Block Editor for the full keyboard reference.

What did you think of this doc?

Previous Understanding Block Types Next Using the Mermaid Diagram Block

Get in touch