# 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](https://lovelyrender.com/documentation/add-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

| Block | Role | States |
| --- | --- | --- |
| **Tabs navigation** | The bar, a row that you lay out in its **Flex layout** panel. It accepts a Container before the tab strip and another after. | **Default**, **Hover** |
| **Tabs strip** | The tabs and the arrows, in the bar. | **Default**, **Hover** |
| **Tab navigation item** | A tab. It accepts text, an icon or an image. | **Default**, **Hover**, **Focus**, **Active** |
| **Tab shape indicator** | A pill-shaped tab, with the **Shapes** navigation style. | **Default**, **Hover** |
| **Tabs panels** | The area that holds the panels. | **Default**, **Hover** |
| **Tab panel** | The content of a tab. It accepts any block. | **Default**, **Hover**, **Active** |
| **Navigation button** | The previous and next arrows. An arrow accepts a text, an icon or a Container. | **Default**, **Hover**, **Focus**, **Disabled** |

## 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.

| Setting | Effect | Default value |
| --- | --- | --- |
| **Navigation style** | **Content blocks**: each tab is composed of blocks (text, icon, image). **Shapes**: each tab is a shape whose color, size and border you set. | **Content blocks** |
| **Default active tab** | The tab open when the page loads. **No active tab** opens no panel until the visitor chooses a tab. | **Tab 1** |
| **Show the previous and next panels** | Lines the panels up side by side: the open panel in the middle, its neighbors extending past the edges. The visitor clicks a neighbor to open it. | Off |
| **Rotation method** | **Manual**: the visitor chooses the tab. **Auto**: the tabs change on their own, at a regular interval. **Both**: the tabs change on their own and the visitor can choose. | **Manual** |
| **Navigation position** | Places the bar at the **Top**, **Right**, **Bottom** or **Left** of the panels. | **Top** |
| **Disable arrow navigation** | Removes the previous and next arrows. In **Manual** or **Both** mode. | Off |
| **Arrow buttons placement** | **In the navigation bar** or **Around the panels**. When the arrows are shown. | **In the navigation bar** |
| **Overlay arrows** | Places the arrows over the content of the panels instead of beside it. With the arrows **Around the panels**. | Off |
| **Loop** | From the last tab, next goes back to the first. When off, the arrows and the keyboard stop at both ends. The arrow at the end of its travel then takes its **Disabled** state. In **Manual** or **Both** mode. | On |
| **Swipe on touch screens** | A horizontal swipe on the panels opens the next or previous tab. In **Manual** or **Both** mode. | Off |
| **Show a pause button** | Places a button that stops the rotation. In **Auto** or **Both** mode. | On |
| **Random rotation time** | Picks the interval between two tabs at random, between a minimum and a maximum. In **Auto** or **Both** mode. | Off |
| **Rotation time (ms)** | The display time of a tab, from 500 to 10,000 ms. | 2,000 ms |
| **Minimum rotation time (ms)** and **Maximum rotation time (ms)** | The bounds of the randomly picked interval, from 500 to 10,000 ms. With **Random rotation time**. | 2,000 ms and 3,000 ms |

![The Tabs settings panel in Manual mode: Navigation style set to Content blocks, Default active tab set to Tab 1, Show the previous and next panels, Rotation method, Navigation position set to Top, then the arrow settings, Loop turned on and Swipe on touch screens.](https://static.lovelyrender.com/uploads/2026/10/907-doc-blocs2-onglets.png)

Colors, typography, size, borders and animations are set as on any block: see [Color a block](https://lovelyrender.com/documentation/color-block/), [Format text](https://lovelyrender.com/documentation/format-text/), [Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/) and [Animate a block](https://lovelyrender.com/documentation/animate-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.

**Warning:** In **Auto** mode, the tab bar is not published: nothing is clickable and the panels follow one another on their own. It is hidden in the editor as on the site. To keep clickable tabs during rotation, choose **Both**.

## 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](https://lovelyrender.com/documentation/save-block-style/)).

**Tip:** Keep a cue other than color for the active tab, a line or a background. Information carried by color alone escapes some visitors.

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](https://lovelyrender.com/documentation/adopt-catalog-design/)). To space the tabs apart, apply the **Spaced** style to the tab strip, a gap of 8 px ([Space your blocks](https://lovelyrender.com/documentation/space-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.

| Key | Effect |
| --- | --- |
| `Tab` | Enters the bar. The whole bar counts as a single stop. |
| `←` and `→` | Opens the previous or next tab and gives it focus. Without **Loop**, stops at both ends. |
| `Enter` or `Space` | Opens the tab that has focus. |
| `Tab` from the bar | Goes to the open panel, then to its content. |

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](https://lovelyrender.com/documentation/accordion-block/)
- [Slider](https://lovelyrender.com/documentation/slider-block/)
- [Animate a block](https://lovelyrender.com/documentation/animate-block/)
- [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/)