Tabs switch panels in place. Orientation is horizontal or vertical. Height tokens include auto, pixel values, and vh. Custom JS (not jQuery UI). On a phone they become an accordion.
Use it for parallel chapters. Prefer Accordion when every heading should stay visible in the page flow on desktop too.
Overview
APB-DOCS-COMP-TABS
Tabs switch panels in place. Orientation is horizontal or vertical. Height tokens include auto, pixel values, and vh. Custom JS (not jQuery UI). On a phone they become an accordion.
Use it for parallel chapters. Prefer Accordion when every heading should stay visible in the page flow on desktop too.
Adding the component
Click Add Tabs. Set orientation, height, and CS02. Add tab items with title and body. Save. On a narrow viewport, confirm the accordion behavior.
Component configuration
Parent bundle apb_pb_tabs (Tabs). Shared fields (section title, placement, width, custom class, intro, container settings, access control) are documented once. Component-specific fields are listed in full from the live Field API dump dated 2026-09-03T03:15:35+00:00.
Container settings sections: padding, margin, border, background. Shared defaults and the validator regex are on Shared settings.
| Field | Label | Type | Required | Accepted values | Default | Notes |
|---|---|---|---|---|---|---|
field_apb_pb_container_settings | Container settings | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_pb_container_bg_media | Background media | entity_reference | no | entity: media (image, video, remote_video) | empty | Shared. See Shared settings. |
field_apb_pb_intro | Intro Text | text_long | no | — | empty | Shared. See Shared settings. |
field_apb_section_title | Section Title | string | no | — | empty | Shared. See Shared settings. |
field_apb_show_section_title | Show Section Title | list_string | yes | no=No</code>, <code>yes=Yes | [{"value":"no"}] | Shared. See Shared settings. |
field_apb_tabs_items | Tabs Items | entity_reference_revisions | no | entity: paragraph (apb_pi_tabs) | empty | — |
field_apb_target_placement | Target Placement | entity_reference | yes | current_position</code>, <code>main_content_no_container</code>, <code>main_content_top</code>, <code>main_content_bottom</code>, <code>presentation_region</code>, <code>sidebar_top</code>, <code>sidebar_bottom</code>, <code>internal_placement_1</code>, <code>internal_placement_2</code>, <code>internal_placement_3 | [{"target_id":52}] | Shared. See Shared settings and Target placement. |
field_apb_color_style_02 | Color Style | entity_reference | yes | blue</code>, <code>blue_and_green</code>, <code>gray</code>, <code>green</code>, <code>orange</code>, <code>red</code>, <code>teal_blue</code>, <code>yellow_orange_and_red | empty | — |
field_apb_tabs_orientation | Orientation | list_string | no | horizontal=Horizontal</code>, <code>vertical=Vertical | [{"value":"horizontal"}] | — |
field_apb_tabs_height_tx | Height | entity_reference | no | auto</code>, <code>240px</code>, <code>320px</code>, <code>400px</code>, <code>480px</code>, <code>560px</code>, <code>640px</code>, <code>40vh</code>, <code>50vh</code>, <code>60vh</code>, <code>70vh</code>, <code>80vh | [{"target_id":253}] | — |
field_apb_width_tx | Component Width | entity_reference | yes | 25_</code>, <code>33_</code>, <code>40_</code>, <code>50_</code>, <code>60_</code>, <code>66_</code>, <code>70_</code>, <code>75_</code>, <code>80_</code>, <code>90_</code>, <code>100_ | [{"target_id":72}] | Shared. See Shared settings. |
field_apb_custom_class | Custom Class | string | no | — | empty | Shared. See Shared settings. |
Component items
APB Tabs apb_pi_tabs
field_apb_pi_desc is the Inline Entity Form autocomplete label. It is not rendered on the front end.
| Field | Label | Type | Required | Accepted values | Default | Notes |
|---|---|---|---|---|---|---|
field_apb_pi_title | Title | string | yes | — | empty | — |
status | Published | boolean | no | — | [{"value":true}] | — |
field_apb_pi_body | Body | text_long | yes | — | empty | — |
field_apb_pi_custom_class | Custom Class | string | no | — | empty | — |
field_apb_pi_desc | Description (internal) | string | no | — | empty | Internal description for disambiguation in the IEF autocomplete picker. |
Examples
Live working examples are on the demo site. Open https://demo.apb.aero.net/components/tabs for configurations of this component. That page links back here as View documentation.
Shared layout options are not repeated in the video.