Tabs
Tabs
The Tabs component (ion-tabs) creates a tabbed content interface that groups child Tab Section renderings as navigable panels. On medium-and-larger viewports, it renders as a Bootstrap nav-tabs <ul> with clickable tab links; on small screens it collapses into a Bootstrap accordion for mobile-friendly interaction.
Tabs do not have a datasource template — all configuration is controlled via rendering parameters. Each tab panel is defined by placing a Tab Section (ion-tabSection) rendering inside the Tabs placeholder. Tab Sections in turn contain their own bs-section placeholder where you can nest Grids, Paragraphs, or any other component.
Three visual styles are available via the TabsStyle parameter: Vertical (side-by-side navigation), Underline (bottom-border active indicator), and Expand (full-width equal-size tabs). The first Tab Section is automatically marked as the active/open tab on page load.
Examples
Default Tabs (Vertical Style)
Below is a liveion-tabs rendering configured with the Vertical tab style. This renders tabs as left-side navigation links with a content pane on the right at medium+ viewports. On mobile it collapses into an accordion.
Tab 1 Content
This is the content of Tab 1 (Overview). It is the first Tab Section in the placeholder order and is therefore rendered as the active tab on initial page load. Any component can be nested inside a Tab Section — Grids, Paragraphs, Images, or even nested Tabs.
Tab 2 Content
This is the content of Tab 2 (Details). Clicking the “Details” tab link activates this panel and deactivates the Overview panel. On mobile, tapping the “Details” accordion header expands this section while collapsing the previous one.
Tab 3 Content
This is the content of Tab 3 (Contact). This Tab Section demonstrates that any number of tabs can be added. You can also set a CustomAnchor parameter (e.g. contact) to enable deep-linking via #contact in the page URL.
Tab 1 Content
This is the content of Tab 1 (Overview). It is the first Tab Section in the placeholder order and is therefore rendered as the active tab on initial page load. Any component can be nested inside a Tab Section — Grids, Paragraphs, Images, or even nested Tabs.
Tab 2 Content
This is the content of Tab 2 (Details). Clicking the “Details” tab link activates this panel and deactivates the Overview panel. On mobile, tapping the “Details” accordion header expands this section while collapsing the previous one.
Tab 3 Content
This is the content of Tab 3 (Contact). This Tab Section demonstrates that any number of tabs can be added. You can also set a CustomAnchor parameter (e.g. contact) to enable deep-linking via #contact in the page URL.
Underline Style
The second live example below uses the Underline style (tab-style-underline). The tab links display horizontally with a bottom-border active indicator — the most common style for marketing pages. Click between the “Products”, “Services”, and “Resources” tabs to see the underline move.
Underline Tab 1
This is the Products tab rendered with the Underline style. The active tab link displays a bottom-border indicator instead of the standard Bootstrap pill or vertical highlight. This style works well for horizontal navigation where a subtle visual cue is preferred.
Underline Tab 2
This is the Services tab. Click between tabs to see the underline indicator move to the active link. On mobile screens this renders as a collapsed accordion, identical in behaviour to the other tab styles.
Underline Tab 3
This is the Resources tab. The underline style applies the tab-style-underline CSS class to the tab list, which your stylesheet can use to render a bottom-border active indicator on the .nav-link.active element.
Underline Tab 1
This is the Products tab rendered with the Underline style. The active tab link displays a bottom-border indicator instead of the standard Bootstrap pill or vertical highlight. This style works well for horizontal navigation where a subtle visual cue is preferred.
Underline Tab 2
This is the Services tab. Click between tabs to see the underline indicator move to the active link. On mobile screens this renders as a collapsed accordion, identical in behaviour to the other tab styles.
Underline Tab 3
This is the Resources tab. The underline style applies the tab-style-underline CSS class to the tab list, which your stylesheet can use to render a bottom-border active indicator on the .nav-link.active element.
Expand Style
The Expand style forces all tab links to fill the available width equally (using row-cols-auto removed and flexbox fill). This is useful when you have 2–4 tabs and want them evenly distributed across the row.
Responsive Behaviour
All tab styles collapse to an accordion on small screens by default. The component renders both a <ul> tab list (hidden on mobile via d-none d-md-flex) and an .accordion container (hidden on desktop via d-md-none). The first Tab Section is always active on page load.
Usage Notes
Notes
- Tabs has no datasource template. It is a structural component driven entirely by rendering parameters and the Tab Section children placed inside its placeholder.
- Each Tab Section rendering placed in the
bs-tabsplaceholder defines one tab. The Title parameter on each Tab Section is the text displayed on the tab link and accordion button. - The first Tab Section in the placeholder order is always rendered as the active tab on initial page load (via the
active showclasses). - On mobile, the accordion variant uses
data-bs-parentto ensure only one panel is open at a time, matching standard Bootstrap accordion behaviour. - The Vertical style adds the
flex-columnclass and wraps the component in ad-md-flexrow so the tab links sit on the left with acol-md-3width. Content fills the remaining columns. - The Expand style removes the default
row-cols-autoclass so tabs grow equally to fill the row. - The DynamicFillSelector parameter adds a
dynamic-fillclass and adata-dynamic-fill-selectorattribute. Custom JavaScript can then use this to size the tab content area dynamically. - In Experience Editor, the tab/accordion structure is replaced by a flat editing view. Each Tab Section renders its title in a bordered inline label and its content in a bordered block below it.
- Tab Sections support a CustomAnchor parameter that overrides the generated HTML ID, enabling hash-based deep linking to a specific tab (e.g.
#my-custom-tab). - Tab Sections also accept TOCTitle and HideFromTOC parameters. If a Table of Contents is on the same page, tabs can optionally appear in the TOC or be excluded.
Control Properties
Control Properties
Tabs (ion-tabs)
| Parameter | Type | Description |
|---|---|---|
| TabsStyle | Droplink | Visual style for the tab navigation. Options: Vertical (flex-column), Underline (tab-style-underline), or Expand (expand-tabs). |
| TabBreakpoint | Single-Line Text | Bootstrap breakpoint at which tabs switch from accordion (mobile) to tabbed layout (e.g. small, md, lg). Defaults to md. |
| DynamicFillSelector | Single-Line Text | A CSS selector used by custom JS to dynamically size the tab content container. When set, adds the dynamic-fill class and a data-dynamic-fill-selector attribute. |
| Small / Medium / Large | Droplink | Column width classes at each breakpoint (inherited from column parameters). |
| AddClass | Single-Line Text | Additional CSS class(es) appended to the component wrapper. |
Tab Section (ion-tabSection)
| Parameter | Type | Description |
|---|---|---|
| Title | Single-Line Text | The tab link label displayed in the nav and accordion header. |
| CustomAnchor | Single-Line Text | Overrides the auto-generated HTML id. Use for deep-linking to a specific tab via URL hash. |
| TOCTitle | Single-Line Text | Override text for Table of Contents if the tab contributes headings to the TOC. |
| HideFromTOC | Checkbox | When checked, the tab heading is excluded from the page Table of Contents. |
| HeadingSize | Droplink | Semantic heading level for the accordion header (default h2). |
| AddClass | Single-Line Text | Additional CSS class(es) for the tab item wrapper. |