sgalinski / df-tabs

11.1.0 2026-11-02 14:44 UTC

Requires

• typo3/cms-core: >=14.3.0 <=14.3.99

Replaces

• sgalinski/df_tabs: 11.1.0

GPL-2.0-or-later

• Stefan Galinski

Published on Packagist.org on 2026-11-02 14:45 UTC

README

License: GNU GPL, Version 2 or later

Repository: https://gitlab.sgalinski.de/typo3/df_tabs

Please report bugs here: https://gitlab.sgalinski.de/typo3/df_tabs/issues

About

df_tabs displays existing TYPO3 content elements or the content of selected pages in tabs. Editors choose the source records and can override individual tab titles. The default Fluid template uses Bootstrap 5 markup. Your theme supplies the Bootstrap styles and tab JavaScript; the extension does not load Bootstrap for you.

Requirements

• TYPO3 14.3.x, matching the extension's Composer constraint.
• A PHP version supported by your TYPO3 installation.
• Fluid Styled Content (typo3/cms-fluid-styled-content) for the default content element rendering.
• Bootstrap 5 CSS and its tab JavaScript for the default template, typically supplied by the theme.

Installation

1. Install the Composer package sgalinski/df-tabs and ensure Fluid Styled Content is installed.
2. Include the extension configuration through one of the following methods.
3. Ensure your theme loads Bootstrap 5 CSS and its tab JavaScript.
4. Create a Pages/Content Elements In Tabs content element in the TYPO3 backend.

Sites using site sets

Select the df_tabs set in the site configuration, or add its identifier to the dependencies of your site or site-package set:

dependencies:
    - sgalinski/df-tabs

Merge this entry into any existing dependency list. The set depends on typo3/fluid-styled-content and loads the shared TypoScript constants and rendering configuration without legacy CSS/JS includes. Your theme supplies Bootstrap 5. Existing static-template installations can retain their current integration; switching to the set is optional.

If your custom template needs the deprecated assets, explicitly select the additional df_tabs: Legacy frontend assets (deprecated) set (sgalinski/df-tabs-legacy-assets). It depends on the base set and adds the historical CSS/JS includes. See the asset integration notes.

Sites using TypoScript template records

In the template record, include Fluid Styled Content followed by the df_tabs static template. Static templates and site sets use separate include lists. The static template remains available for installations using template records and retains its existing legacy CSS/JS includes.

When mixing site sets with template records, leave the Clear flags for constants and setup unchecked so that the records do not discard configuration supplied by the site sets.

Usage

For an explicit selection, choose Combined mode and add pages or content elements in the Pages and Content That Shall be Rendered as Tabs field. Each selected record becomes one tab, in selection order. A page contributes its content elements rather than a complete rendered page.

Without an explicit selection, Show Pages uses the current page's direct subpages. Show Content Elements uses the configured content selection from the current page; see the selection details before relying on this fallback.

Under Override Tab Titles, enter one title per line. Use DEFAULT to keep a record's original title at that position. By default, page titles and content element headers supply the labels.

Selected content elements remain ordinary TYPO3 records. Referencing them in tabs does not remove them from their original frontend location; arrange the source records accordingly.

Configuration and customization

The configuration reference covers effective TypoScript settings, selection behavior, Fluid overrides, frontend assets and limitations. The current renderer always uses Fluid. Autoplay, hover navigation and configurable animation options described in older versions of this README are not implemented by the bundled frontend.

The legacy frontend JavaScript, CSS and Sass files are deprecated for removal in the next major release. This release retains the files and the existing static template's includes. The new base site set does not load them. See the deprecated asset list and preparation steps.

For an existing installation, also read UPGRADE.md.

Troubleshooting

• No df_tabs entry in the site-set selection: ensure the installed extension version contains Configuration/Sets/DfTabs/config.yaml. Installing an extension alone does not activate its set.
• Plain titles or inactive tabs: check that the selected template matches its frontend assets. The default template requires Bootstrap 5 CSS and tab JavaScript. The legacy tabs.js expects .m-tabs markup and does not initialize the default Bootstrap template. See the template options.
• Tab titles appear, but panels are empty: check the selected source records, their visibility, the page-content filters and the TypoScript used to render their content elements.
• Changes do not appear: clear the TYPO3 frontend caches after changing templates or configuration.

The frontend regression tests in tests/Frontend/tabs.spec.ts cover the existing Bootstrap markup, theme styling, independent tab groups and keyboard navigation. In WebsiteBase they are registered as the Extension: df-tabs Playwright project, with and without legacy assets. The PHPUnit tests under tests/Unit/Configuration/ check effective TypoScript configuration, existing static-template behavior, optional legacy assets and preservation of theme-provided includes.