Skip to main content
Version: Beaver Builder 2.11

Tabs

Use Tabs to display a collection of tabbed content built from manual items or post-based content.

Usage​

Use Tabs to display a collection of content panels that visitors switch between using a row of labels. Build tabs manually with custom content, or generate them dynamically from posts, pages, or custom post types. The module supports both horizontal and vertical layouts and provides a separate behavior for how tabs collapse on mobile.

This module is useful for product details, feature comparisons, documentation sections, pricing breakdowns, and other layouts that group related content into compact, switchable panels.

Module Settings​

The Tabs module settings control where tab items come from, how labels and content render, and how the tabs look on the front end.

Items Tab​

The Items tab defines the tab source and the content shown inside each tab panel.

Content Source Default: Custom Content

Selects whether tab items come from WordPress posts or manual entries created inside the module.

  • Post: Builds tab items from queried WordPress posts, pages, or custom post types.
  • Custom Content: Builds tab items from manual items added directly in the module.
Post Settings
Post

The Post section configures the query used when Content Source is set to Post.

Post Query
Post Type Default: Post

Selects one or more post types to query for tab items.

Posts Per Page Default: 5

Sets how many queried posts appear as tab items.

Ordering settings

Ordering settings control how queried posts or items are sorted, such as by date, title, menu order, or custom ordering options where available.

Filtering settings

Filtering settings control which posts, terms, authors, or content types are included or excluded from the module output.

Display Settings
Display

The Display section controls post output for tab content. This section is available when Content Source is set to Post.

Display
Content Type (Post Only) Default: Post Content

Selects whether post-based items render full post content or post excerpts.

  • Post Content: Displays the full post content inside each tab panel.
  • Post Excerpt: Displays the post excerpt and reveals excerpt display settings.
Excerpt Settings
Excerpt Length (Post Excerpt Only)

Sets the number of words shown in each post excerpt.

Excerpt More Text (Post Excerpt Only) Default: ...

Sets the text appended after each excerpt.

More Link (Post Excerpt Only) Default: Hide

Shows or hides a link below each post excerpt.

  • Show: Displays a link below the excerpt and reveals More Link Text.
  • Hide: Removes the excerpt link.
More Link Text
More Link Text (Show Only) Default: Read More

Sets the label used for the post excerpt link when More Link is set to Show.

Custom Content Settings
Custom Content

The Custom Content section manages manual tab items created inside the module.

Tab Items
Item

Adds one or more tab items and stores the label and content settings for each item.

Item Settings
Label Supports: Field Connections

Sets the label text displayed for the tab.

Type Default: Custom Content

Selects whether the item uses custom editor content or a saved Beaver Builder asset.

  • Saved Row: Loads a saved row into the tab panel.
  • Saved Column: Loads a saved column into the tab panel.
  • Saved Module: Loads a saved module into the tab panel.
  • Saved Template: Loads a saved template into the tab panel.
  • Custom Content: Uses editor content added directly in the tab item.
Select Row
Select Row (Saved Row Only)

Lists all saved rows you have created. Select one to use that saved row as the tab panel content when Type is set to Saved Row.

Select Column
Select Column (Saved Column Only)

Lists all saved columns you have created. Select one to use that saved column as the tab panel content when Type is set to Saved Column.

Select Modules
Select Modules (Saved Module Only)

Lists all saved modules you have created. Select one to use that saved module as the tab panel content when Type is set to Saved Module.

Select Template
Select Template (Saved Template Only)

Lists all templates you have created. Select one to use that template as the tab panel content when Type is set to Saved Template.

Content
Content (Custom Content Only) Supports: Field Connections

Adds custom content using the WordPress Classic Editor when Type is set to Custom Content.

Style Tab​

The Style tab controls layout, colors, borders, label appearance, and content styling for the tabs.

Layout Default: Horizontal

Sets the orientation of the tab labels in relation to the panels.

  • Horizontal: Places the labels in a row above the tab panels.
  • Vertical: Places the labels in a column to the side of the tab panels.
Background Color Supports: Field Connections

Sets the background color of the active tab label and the tab panels.

Border Color Default: e5e5e5; Supports: Field Connections

Sets the border color used around tab labels and the tab panels.

Border Width

Sets the border width in px for tab labels and the tab panels.

Active Tab Default: 1

Sets which tab is open when the module loads. If the value exceeds the number of tabs, the first tab is used. Set to 0 or leave blank to load with no active tab.

Tab(s) Status on Mobile Default: Keep Active Tab Open

Controls how tabs behave when the module collapses to a stacked layout on mobile.

  • Keep Active Tab Open: Keeps the active tab open when the layout collapses on mobile.
  • Close All Tabs: Closes all tabs when the layout collapses on mobile.
Label

The Label section controls the appearance of tab labels.

Label Settings
Inactive Label Text Color Supports: Field Connections

Sets the text color of inactive tab labels.

Inactive Label Background Color Supports: Field Connections

Sets the background color of inactive tab labels.

Active Label Text Color Supports: Field Connections

Sets the text color of the active tab label.

Active Label Background Color Supports: Field Connections

Sets the background color of the active tab label.

Padding Supports: Responsive, Link Values

Sets the inner spacing of tab labels.

Typography Supports: Responsive

The font settings for tab labels.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Content

The Content section controls the appearance of tab panels.

Content Settings
Text Color (Custom Content Only) Supports: Field Connections

Sets the text color for custom content shown inside tab panels. This field appears when Content Source is set to Custom Content.

Padding Supports: Responsive, Link Values

Sets the inner spacing of tab panels.

Typography (Custom Content Only) Supports: Responsive

The font settings for custom content shown inside tab panels. This field appears when Content Source is set to Custom Content.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Advanced tab​

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.

Learn how to create a link that navigates to a specific tab item.

Adding an ID​

To begin, first assign an ID to the Tab module, which can be accomplished by following the instructions below:

  1. Open the Tab module settings and click the Advanced tab.

  2. Scroll to the ID setting, and set a unique ID name for the module.
    See the Advanced tab article for more information about ID selectors.

  3. Save changes.

Index Values​

Every item in the Tab module is given a unique index value that starts at 0. The index value of the initial Tab item is 0, the second item is assigned an index value of 1, the third item has an index value of 2, and so on. By using these index values in an HTML link, you can generate a link to a specific Tab item and set it as the active item.

The below HTML code example demonstrates how the index values are allocated to each Tab item. In this instance, the Tab module has been given a unique ID name of my-tab and consists of three Tab items.

<div id="my-tab" class="fl-module fl-module-tab">
  <div class="fl-module-content fl-node-content">
    <div class="fl-tab">
      <div id="my-tab-0" class="fl-tab-item"></div>
      <div id="my-tab-1" class="fl-tab-item"></div>
      <div id="my-tab-2" class="fl-tab-item"></div>
    </div>
  </div>
</div>

The link structure will differ based on whether the Tab module is on the same page as your link. To create the link, you can use either the Button or HTML modules in your layout.

Same Page​

When the link is on the same page as the Tab module, you can use a hash character (#) followed by an ID name and the item's index value separated by a hyphen. For instance, using our example ID name of my-tab, the link would be structured as follows:

Button module link option
#my-tab-1
HTML module link
<a href="#my-tab-1">My Tab link</a>

Different Page​

To create a link to the Tab module from a different page on your website, use the complete URL of the target page along with the hash symbol (#) followed by the ID and index value. For instance, if you want to add the link to your homepage, and the Tab module is located on a page named Sample Page, the link should appear like this:

Button module link option
https://my-website.com/sample-page#my-tab-1
HTML module link
<a href="https://my-website.com/sample-page#my-tab-1">My Tab link</a>