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.