Help Center

In-page tabs for swapping out content

Nic Allen

Use tab blocks to create dynamic content that changes based on a selection by the viewer.

Introduction

The ‘tab block’ allows editors to create sections within a page, with different content in each section. This can be useful when creating different variants of the same piece of content.

These tabs can stand alone on the page, and viewers can manually switch between them. Or they can be connected to zeroheight themes, where the default tab will update automatically based on the viewer’s theme.

Examples of how you might use tabs:

• Light mode / dark mode for a component
• Web / iOS / Android for code blocks
• Brand A / brand B / brand C for usage guidelines
• English / Spanish for multi-lingual sites

How to create a tab block

• Using the slash inserter, add a ‘tabs’ block
• Choose between ‘Blank’ and ‘Themed’ tabs

Blank tabs

• Blank tabs allow you to start with a single tab and create as many as you like.
• These tabs are standalone on the page and are not connected to zeroheight themes.
• Viewers can switch between these tabs freely.

Themed tabs

• Themed tabs will automatically create a set of tabs matching the name and number of themes applied to the current styleguide.
• Each themed tab is automatically associated as the default tab for its corresponding zeroheight theme.
• This means viewers will be presented with the tab that matches their current theme selection when they visit that page.
• If the viewer changes their theme, the content on the page will automatically switch to the corresponding tab.
• For example, when a viewer switches from light to dark theme, the site’s appearance will update and any themed tabs will switch from the light tab to the dark tab.

☝️ Note: Viewers can still click between and view all themed tabs; it’s just the default view that updates. For example, a viewer can be in the dark theme and manually click to view the light mode version of a component.

Creating content within tabs

Most other content blocks can be nested within tabs, allowing you to create rich, powerful documentation within each section.

Examples of blocks that can be nested within tabs:

• Design uploads
• Code
• Storybook
• Embeds
• Images
• Tokens

Some content blocks cannot currently be nested within a tab. These include:

• Tables
• Callouts
• Rules
• Tabs (tabs can’t be nested within tabs)

FAQs

Can I completely hide a tab based on the theme a viewer selects?

No. Currently, all tabs will always be visible to viewers to manually click between. It’s only the default active tab that changes based on a theme.

How do tab blocks work with page-level tabs?

There’s no interaction between tab blocks and page tabs. Page tabs exist at the top level of a page and are essentially subpages. These subpages have their own URL and are shown in the left navigation. Looking for information on page tabs? Check out this article for page-level tabs.

Tab blocks exist within a page, do not have a unique URL and are not shown in navigation menus.