Tab Section
The Tab Section component (ion-tabSection) represents an individual tab panel inside a Tabs (ion-tabs) container. Each Tab Section provides a tab label (rendered in the navigation strip) and a body content area that can include any nested renderings via an inner bs-section placeholder.
On medium-and-above viewports, Tab Sections render as traditional Bootstrap tabs with a nav-link list and tab panes. On smaller screens they automatically convert to an accordion layout, giving a responsive experience without additional configuration. The first Tab Section in a Tabs container is marked active by default; its pane is visible on initial load.
Key features include a CustomAnchor rendering parameter for deep-linking directly to a tab, Table of Contents integration (TOCTitle / HideFromTOC), and support for additional CSS classes.
Examples
Live Example
Below is a liveion-tabs container with three ion-tabSection children. The first tab is active by default. Each tab body contains a Rich Text paragraph rendered inside the Tab Section’s inner placeholder. On smaller viewports the tabs collapse into an accordion. The third tab demonstrates a CustomAnchor for deep-linking.
Tab A Content
This is the body content of Tab A. As the first Tab Section in the container, it is automatically marked as active and its pane is visible on page load. Any renderings placed inside the Tab Section’s inner placeholder appear here.
You can nest rich text, images, cards, or other components inside a tab body without limitation.
Tab B Content
This is the body content of Tab B. Clicking its tab link in the nav reveals this pane while hiding the others. On smaller screens, expanding this accordion item shows the same content.
Each Tab Section is rendered independently; its content is part of the DOM at all times (no lazy loading by default).
Tab C Content
This is the body content of Tab C. This tab uses a CustomAnchor value of custom-tab, allowing direct navigation via #custom-tab in the URL. This is useful for linking users directly to a specific tab from elsewhere on the site.
Tab A Content
This is the body content of Tab A. As the first Tab Section in the container, it is automatically marked as active and its pane is visible on page load. Any renderings placed inside the Tab Section’s inner placeholder appear here.
You can nest rich text, images, cards, or other components inside a tab body without limitation.
Tab B Content
This is the body content of Tab B. Clicking its tab link in the nav reveals this pane while hiding the others. On smaller screens, expanding this accordion item shows the same content.
Each Tab Section is rendered independently; its content is part of the DOM at all times (no lazy loading by default).
Tab C Content
This is the body content of Tab C. This tab uses a CustomAnchor value of custom-tab, allowing direct navigation via #custom-tab in the URL. This is useful for linking users directly to a specific tab from elsewhere on the site.
Usage Notes
Usage Notes
- Tab Section must always be placed inside a Tabs (
ion-tabs) container. It cannot function as a standalone rendering. - The first Tab Section in the placeholder order is automatically marked active (its pane is shown and its nav-link receives the
activeclass). - On viewports below the
mdbreakpoint, the tab navigation collapses into an accordion. Each Tab Section renders as an accordion item with the same body content. - Use the
CustomAnchorparameter to override the generated HTML ID, enabling deep-links like/page#my-anchorthat open a specific tab on load (requires corresponding JS). - The
Titlerendering parameter provides the tab label text. It is used both for the nav-link text and the accordion button label. - Set
HideFromTOC=1on a Tab Section to exclude it from the page Table of Contents. SetTOCTitleto provide an alternative shorter title for the TOC. - Each Tab Section’s body placeholder (
bs-section) accepts any renderings: Rich Text, Card Groups, Images, Forms, etc. - All tab panes are present in the DOM at page load (no lazy rendering). For heavy content, consider limiting tab count to maintain performance.
Control Properties
Control Properties
Tab Section Rendering Parameters
| Property | Type | Description |
|---|---|---|
| Title | Single-Line Text | The tab label displayed in the nav-link and accordion button. Required. |
| CustomAnchor | Single-Line Text | Overrides the auto-generated HTML ID for the tab pane. Use for deep-linking to a specific tab via URL hash. |
| TOCTitle | Single-Line Text | Alternative short title used in the Table of Contents. Falls back to Title if blank. |
| HideFromTOC | Checkbox | When checked, excludes this tab from the page Table of Contents. Adds data-toc-skip to the heading element. |
| HeadingSize | Dictionary Phrase | Heading element size for the accordion header (defaults to h2). |
| AddClass | Single-Line Text | Additional CSS classes appended to the tab item wrapper. |
Parent Tabs Container Parameters (for reference)
| Property | Type | Description |
|---|---|---|
| TabsStyle | Dictionary Phrase | Visual style of the tabs navigation: nav-tabs (default), nav-pills, expand-tabs, or flex-column (vertical). |
| TabBreakpoint | Single-Line Text | Breakpoint at which the accordion switches to tab UI. Default is md. |
| DynamicFillSelector | Single-Line Text | CSS selector for dynamic fill behaviour (equalises nav-link widths at runtime). |
| Medium | Column Width | Bootstrap column width for the Tabs container. Use FullWidth for 12-column span. |