Tabs to group content

Tabs are a toolbar component now, alongside Accordion and Callout, so no custom code is involved. What they are for is narrower than it looks.

Tabs put several versions of the same instruction in one place. They are a component on the article editor toolbar now, alongside Accordion and Callout, so no custom code or theme change is involved. What they are for, though, is narrower than it looks.

Add tabs

1. Place the cursor where the tabs should sit.
2. Click Tabs on the editor toolbar.
3. Name each tab for what it contains.
4. Fill each one so it reads completely on its own.
5. Preview, because tabs behave differently on a phone.

If you find older guidance telling you to build tabs from a content block with custom code, that predates the toolbar component and you can ignore it.

What tabs are for

One task, several environments. Windows and Mac. iOS and Android. The agent interface and the mobile app.

The reader knows which one they are, picks it, and reads a set of steps that is complete on its own.

What they are not for

Hiding length. A long article with its middle folded into tabs is still long, and now parts of it cannot be found with the browser's own search or read straight through.

Sequence. Tabs suggest alternatives, so numbering them one, two and three tells the reader that steps two and three are optional.

Content in a tab is harder to find

An unselected tab is not visible to somebody scanning the page, and a reader who does not notice the tab strip concludes their situation is not covered.

Where the variants differ substantially, two articles beat one article with two tabs. Where they differ in one step, keep one article and say so in a sentence.

Name them concretely

"Windows" and "Mac", not "Option A" and "Option B". The tab label is the whole basis on which a reader decides which one is theirs.

Tabs, accordions or callouts

See also

• Collapsible sections with accordions
• Callouts to highlight something
• Formatting tables