---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/tabs-element'
title: 'Adding a Tabs Panel | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:36:38+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Put related content side by side in tabs that visitors click to switch, such as one tab per service'
tags:
  - Layout
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Tabs Panel'
      description: 'Put related content side by side in tabs that visitors click to switch, such as one tab per service'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:36:38+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/tabs-element'
      articleSection: Layout
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/layout/tabs-element'
      description: 'Put related content side by side in tabs that visitors click to switch, such as one tab per service'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Layout](/hc/documentation/learn-dxpr-builder/layout/overview) # Adding a Tabs Panel.

Put related content side by side in tabs that visitors click to switch, such as one tab per service

 Learn DXPR BuilderBuild pagesAdd contentLayout

   ## In this guide

 Related guides

- [Collapsibles](/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)
- [Carousel layout](/hc/documentation/learn-dxpr-builder/layout/carousel-layout)
- [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting)

Use Tabs when you want several blocks of related content in one place, with only one visible at a time. You end up with a row of tab labels; visitors click a label to see its content. The example builds an agency page with one tab per service. For questions and answers, a [collapse panel](/hc/documentation/learn-dxpr-builder/layout/collapsibles-element) usually reads better.

## Add a tabs panel

1. Hover the column and click **+** in its control bar, or the **+** in the middle of an empty column, to open the element picker.
2. In the **Layout** tab, click **Tabs**. The element appears with one tab, labelled **Title**.
3. Hover the tab's panel and open **More > Settings**. Type a name in **Tab title** and click **Save**.
4. Click **+** inside the panel to add content, such as a **Text** element.
5. To add a tab, hover the tab labels and click **Add tab** in the **Tabs** control bar. The new tab lands first, in front of the others. Name it and fill it the same way.

  ## What you see

A row of tab labels sits above the content of the open tab. In Preview and on the published page, a click on a label shows that tab's content and hides the rest. Each tab holds its own elements, so one tab can carry text and another a set of cards. On screens narrower than 768 pixels the tabs turn into stacked headers that open like a collapse panel.

## Set up your tabs

The **Tabs** element has three settings. Open them from **More > Settings** in the **Tabs** control bar, which shows when you hover the tab labels.

| Setting | What it does | Default |
|---|---|---|
| **Tab direction** | Where the labels sit: **Default** (above the content), **Left** or **Right** | Default |
| **Style** | The look of the labels: **Default** (a line under the labels), **Modern** (rounded cards) or **Accordion** (headers with separator lines) | Default |
| **Mobile friendly** | Shows the tabs as collapsible headers on screens narrower than 768 pixels | On |

Each tab has its own settings under **More > Settings** on its panel. **Tab title** is the label text. **Tab description** is an optional short line under the label of the open tab.

## Manage tabs

- **Reorder**: drag a tab label to a new place among the labels. Its content moves with it.
- **Rename**: hover the tab's panel, open **More > Settings**, change **Tab title** and click **Save**.
- **Remove**: hover the tab's panel, open **More** and choose **Delete**. Everything inside the tab is removed with it.

Keep labels to one to three words and stay at about five tabs, so the labels fit on one line.

## If you don't see it

- **The new tab is first instead of last.** **Add tab** always puts the new tab in front. Drag its label to the place you want.
- **The settings show only Tab title and Tab description.** You opened the settings of one tab. Hover the tab labels so the **Tabs** control bar shows, then open **More > Settings** there.
- **Phones show stacked headers instead of tabs.** **Mobile friendly** is on, which is the default. Switch it off in the **Tabs** settings to keep tabs on every screen width.
- **Tabs is missing from the Layout tab of the picker.** Your DXPR Builder user profile leaves it out. An administrator ticks **Tabs** under **Elements** in your profile at `/admin/dxpr_studio/dxpr_builder/profile`.

## What's next?

- [Adding a Collapsible Panel](/hc/documentation/learn-dxpr-builder/layout/collapsibles-element): stack questions and answers that open one at a time.
- [Adding a Carousel Layout](/hc/documentation/learn-dxpr-builder/layout/carousel-layout): show the same kind of content one slide after another.
- [Nesting](/hc/documentation/learn-dxpr-builder/layout/nesting): put rows and columns inside a tab for richer layouts.