---
title: "Using the Tabs Block"
description: "Put alternative versions of the same instructions behind horizontal tabs, so readers pick the one that applies instead of scrolling past the rest."
url: "https://support.helpdocs.io/article/krygnk98ui-using-the-tabs-block"
category: "Using the Text Editor"
updated_at: "2026-10-27T13:51:01Z"
---

# Using the Tabs Block

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](/article/jr785kqmtg-using-the-steps-block). If the right section depends on an answer the reader gives you, use a [Decision Tree](/article/e1dp25pdj7-building-a-decision-tree).

### Adding a Tabs Block

Type `/` anywhere in an article and pick ![Tab icon](https://files.helpdocs.io/Ytt2uahFxY/articles/krygnk98ui/1793108305656/tab-icon.svg) **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 |

[Embedded iframe](https://player.vimeo.com/video/1239849778)

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](/article/kr7prvv938-understanding-block-types), or [Shortcuts in the Block Editor](/article/qsuih77eq7-shortcuts-in-the-block-editor) for the full keyboard reference.