Tabs split content into panels with a row (or column) of labels; only one panel is visible at a time. Visitors switch panels by clicking the labels. On narrow screens the tabs turn into a stacked accordion so nothing is lost on phones.

What it is for

Use Tabs when a topic has a few parallel facets that visitors compare or choose between: overview / schedule / venue, three membership levels, per-audience instructions. If visitors are likely to read everything in order, an Accordion or plain headings serve better.

See it live on the example page APB Tabs, which also shows Tabs inserted in a Simple Content column.

Structure

• The Tabs component sets the orientation, the panel height and the color.
• Tabs Items — one per tab: the label (Title) and the panel content (Body). The first item is the tab open when the page loads.

Component settings

Setting	Options	Default	What it does
Section Title / Show Section Title / Intro Text	—	— / No / empty	See Section Title and Intro Text.
Target Placement	Body, Main Content Top/Bottom, Top region, Sidebars, Internal Placement 1–3	Body	See Target Placement.
Color Style	Blue, Blue and Green, Gray, Green, Orange, Red, Teal Blue, Yellow	— (required)	Color of the active tab and its underline (second palette). See Color Style.
Orientation	Horizontal, Vertical	Horizontal	Labels in a row above the panel, or in a column at the left of it. Vertical suits long labels and many tabs.
Height	Auto, 240px … 640px, 40vh … 80vh	Auto	Fixed height of the panel area; longer content scrolls inside it. Auto lets each panel take its natural height, so the page may jump slightly when switching tabs.
Component Width	25% … 100%	100%	See Component Width.
Custom Class	text	empty	See Advanced settings.
Container Settings	—	32px bottom margin	See Container Settings.

Tabs Item fields

Field	Required	What it does
Title	yes	The tab label. Keep it to one or two words in horizontal orientation.
Body	yes	The panel content (rich text).
Description (internal)	no	Editor note; never shown.
Custom Class	no	Extra CSS class on this panel.

How to use it

1. Click Add Tabs; set a Section Title and a Color Style.
2. Choose the Orientation. Set a fixed Height when the panels have similar length and you want the page to stay still; keep Auto otherwise.
3. Click Add new Tabs Item; type the label as Title and the content as Body; click Create. Repeat per tab and drag to order — the first is selected by default.
4. Save and resize the browser window to check the accordion fallback on narrow screens.

Tips

• Three to six tabs is the comfortable range; beyond that, prefer Vertical orientation or an Accordion.
• Tabs are not linkable individually: a visitor arriving from a link always sees the first tab.
• To place Tabs beside a paragraph, insert them into a Simple Content region with Target Placement Internal Placement 1.

For site builders

Item	Value
Module	apb_pb_tabs
Paragraph types	apb_pb_tabs, apb_pi_tabs
Requires	apbuilder, Paragraphs, Entity Reference Revisions, Inline Entity Form, Field Group, core Options / Taxonomy / Text
Own vocabulary	apb_tax_tabs_height (Auto, 240px … 640px, 40vh … 80vh)
Shared vocabularies	apb_tax_cs_02, apb_tax_width, apb_tax_target_placement
Front-end	apb_pb_tabs/frontend: jQuery UI tabs built client-side with an accordion fallback below the mobile breakpoint; active-tab colors injected as inline CSS.
Permissions	Install grants view to anonymous and authenticated users only; grant create/update/delete on both bundles to your editor roles manually.
Container settings	Full profile.
Example page	/apbuilder_examples/apb-tabs