Use tabs to display content that has a correlation but is not directly related. The tabs themselves serve as an information architecture for the page, so ensure that there is a common thread that holds them together.

When in doubt, avoid using tabs. A cardinal rule of web design is “Don’t hide content” because visitors will not find it. Tabs break that rule.

---

Overview

Here’s an example set of tabs:

Apples

Here’s some content about apples.

Each tab should elaborate on a particular subtopic that relates to an overarching theme, set of steps, or otherwise common thread. Tabs can include multiple paragraphs, lists, links, images, and other components, like buttons and cards.

Learn more

Oranges

A fruit apart

Dissect the true differences between apples and oranges.

Chop, Chop

Here’s some content about oranges.

Each tab should elaborate on a particular subtopic that relates to an overarching theme, set of steps, or otherwise common thread. Tabs can include multiple paragraphs, lists, links, images, and other components, like buttons and cards.

Bananas

Here’s some content about bananas.

Each tab should elaborate on a particular subtopic that relates to an overarching theme, set of steps, or otherwise common thread. Tabs can include multiple paragraphs, lists, links, images, and other components, like buttons and cards.

Tabs should not be the lead element on a page, instead, a context for them should be established. Tabs should never exceed 7 items, and they should not be the primary means to discover information.

Adding Tabs

On sites using the Block Editor, tabs () can be added from the block library, under the Component Library section. Tab content can be edited directly, and options can be set in the sidebar.