Tabs (Contao)

Reusable Contao content element that renders tabbed content using a repeatable item structure.

Powered by MultiColumnWizard for flexible content management in the backend.

Designed to be theme-agnostic: the bundle outputs clean HTML hooks, styling and JS are handled in your project.

Features

• Content element: Tabs
• Unlimited tab items (via MultiColumnWizard)
• Each tab contains:
  • Label
  • Content (RTE / HTML)
• Styles:
  • default
  • pills
  • underline
• Layout:
  • horizontal
  • stack-mobile

Requirements

This bundle requires:

menatwork/contao-multicolumnwizard-bundle

Installed automatically via Composer.

Usage

• Add a new content element of type Tabs
• Define tab items:
  • Label
  • Content
• Choose style and layout
• Add frontend JS for interaction (not included by design)

Notes

• The bundle does not include JavaScript behavior intentionally.
• Use your own JS (e.g. vanilla, GSAP, etc.) to control tab switching.
• HTML structure includes hooks for easy scripting:
  • [data-tabs]
  • .tabs__button
  • .tabs__panel

Template

tabs.html5

Installation (via Composer / Contao Manager)

Add the repository to your Contao project composer.json (root of the Contao installation):

{
  "repositories": [
    {
      "type": "vcs",
      "url": "https://github.com/vtxm-h/tabs"
    }
  ]
}

Installation

composer require vtxm-h/tabs

Compatibility

Contao 4.13 PHP 8.0+

License

MIT