Tabs

The Tabs block shows several pieces of content in the same place: the visitor moves from one to another with a tab bar. This page describes the blocks that make it up, each of its settings and its behavior on a phone and with the keyboard.

Add the block

Insert the Tabs block (Add a block). It comes with its navigation bar, its panels area and a first tab. You write the content in the panels: the bar builds itself from them.

To add a tab, you have three ways. Each creates a panel and its tab in the bar at the right position.

• The Add tab button, under the block, adds the tab at the end. It appears when the Tabs block or one of its blocks is selected.
• The + of the panels area adds a tab without opening the block list.
• On a panel, Add before or Add after in the block’s ⋮ menu, or Ctrl+Alt+T and Ctrl+Alt+Y, add a tab just before or just after.

Delete or move a panel: its tab follows. The bar is not edited by hand.

The blocks that make up the tabs

Set the tabs

Select the Tabs block, open the Settings tab then the Tabs settings panel. Some settings appear only with a rotation method, an arrow position or another setting: the Effect column says so.

Colors, typography, size, borders and animations are set as on any block: see Color a block, Format text, Set size, borders and effects and Animate a block.

Automatic rotation

In Auto or Both mode, the tabs get a pause button. Content that moves on its own for more than five seconds must be stoppable. A screen reader announces this button as Pause the rotation.

If you turn off Show a pause button, the panel shows a warning: without a button, these tabs fail WCAG criterion 2.2.2 (level A). The editor’s Accessibility panel flags the same defect.

Style the tabs

On insertion, each tab receives the registered style Tab and each panel the style Tab panel. With the Content blocks navigation style, the open tab carries a 2 px line under its label and takes your main color. The other tabs carry the same line, transparent, so the text does not move when the tab changes.

To change this appearance, select a tab, choose the Active state in the Styles tab and set its color, border or background. Update the Tab style so that all the tabs of the site follow (Save a block’s style).

The Tabs part of the design catalog gives a look to all the tabs of the site: Underline, Pills, Tinted pills, Segmented, Boxed or Edge (Adopt a design from the catalog). To space the tabs apart, apply the Spaced style to the tab strip, a gap of 8 px (Space your blocks).

How a panel appears

Each panel receives at creation a Fade in animation of 600 ms, triggered When activated and set to Replay. It plays each time the panel opens. You find it in the panel’s Animations tab.

• For another effect, select the panel and replace the fade in the Animations tab. Each panel can have its own.
• For an opening with no effect, delete the animation: the panel appears at once.
• With Show the previous and next panels, the panels do not have this fade: it would make the neighbors invisible. An animation that you placed yourself stays.

The display of the open panel and the hiding of the others are handled by the block. On a panel, the Hide this block checkbox in the Styles tab is grayed out.

The neighboring panels

With Show the previous and next panels, the tabs show a row: the open panel in the middle, a bit of its two neighbors at the edges.

• A panel takes up 80% of the row until you give it another width.
• The panel’s Default state styles the neighbors, its Active state the open panel. An opacity of 50% in the Default state dims the neighbors.
• With Loop, the last panel has the first as a neighbor. Without it, the first has no neighbor on the left nor the last on the right.
• The neighbors cannot be read with the keyboard or by a screen reader: they are reached through the tabs.

On a phone

Placed at the top or bottom of the panels, the tab strip stays on a single row. The labels tighten first, even if that means going onto two lines. When there is no room left, the strip scrolls sideways. The arrows stay at both ends of the bar and the tab they open returns to the center.

• For tabs on several rows, select the tab strip and turn on Wrap in its layout, screen by screen.
• The tabs scroll behind the arrows: give the arrows a background in their style.
• Placed on a side, the bar is a column that extends downward.
• With Swipe on touch screens, a horizontal swipe of at least 40 px on the panels changes tab. A swipe that is more vertical than horizontal scrolls the page.

Tabs as an accordion on a phone

To show each tab followed by its panel on a phone, dissolve the strip and the panels area on that screen.

1. Select the Tabs strip. In its Flex layout panel, choose the Mobile screen then turn on Dissolve on this screen.
2. Select the Tabs panels. In their Dissolve panel, turn on Mobile.
3. Select the Tabs block. Its Grid layout panel lists the tabs and the panels. Give each its order on Mobile: tab 1, panel 1, tab 2, panel 2.

On this screen, the closed panel leaves the page and the open panel appears with no fade. The arrows disappear. With the keyboard and a screen reader, they are still tabs.

Accessibility

The block follows the tabs pattern that assistive technologies expect. You have nothing to turn on.

A screen reader announces the tab’s position and its state, links each tab to its panel and does not read the closed panels. The bar’s arrows stay clickable with the mouse but leave the keyboard order: ← and → do the same thing.

An arrow that contains several stacked labels, one per tab, must hide the others with Hide this block. An opacity is not enough: a screen reader reads all the text of the button.

A block before or after the tabs

The bar accepts a Container before the tab strip and another after. The Tabs block gives the Active state to the first when the first tab is open. It gives it to the second when the last tab is. You can style it in this state, hide it in the Default state with Hide this block or animate it When activated.

For example, in a five-tab story without Loop, a Container after the strip holds a button hidden in the Default state. On the next arrow, check Hide this block in the Disabled state. At the last tab, the arrow disappears and the button takes its place.

See also

• Accordion
• Slider
• Animate a block
• Check the accessibility of your pages