jmf/twig-tabs

Tabs extension for Twig

1.0.0 2026-05-21 01:34 UTC

Requires

• php: ^8.3
• jmf/template-rendering: ^2.0
• twig/twig: ^3.0

Requires (Dev)

• overtrue/phplint: ^9.7.1
• phpstan/phpstan: ^2.1.55
• phpstan/phpstan-strict-rules: ^2.0.11
• phpunit/phpunit: ^12|^13
• rector/rector: ^2.4.3
• squizlabs/php_codesniffer: ^4.0.1

mit

README

Renders tabbed content from Twig templates.

Installation

composer require jmf/twig-tabs

Setup

Pass the Twig FilesystemLoader when registering the extension. The @JmfTwigTabs namespace is registered automatically:

$twig->addExtension(new TabsExtension($templateRenderer, $loader));

Usage in Twig templates

tabs() and tab()

{{ tabs(
    tab('articles').label('First tab').content('<p>Content 1</p>'),
    tab('authors').label('Second tab').include('path/to/template.html.twig', {foo: bar}),
    tab('comments').label('With badge').content('<p>Content 3</p>').badge('5'),
) }}

Or passing an array:

{{ tabs(myTabBuilders) }}

tab() builder methods

Method	Description
.label(string $label)	Tab header label
.content(string $html)	Raw HTML content for the tab pane
.include(string $path, array $parameters)	Render a template as the tab pane content
.badge(?string $badge)	Optional badge displayed next to the label

Customising templates

Override individual templates by pointing $templatePath to your own entry point, or replace the @JmfTwigTabs namespace with your own templates directory. The five templates are:

• bootstrap/tabs.html.twig — entry point, includes nav and content
• bootstrap/nav-tabs.html.twig — <ul> tab navigation
• bootstrap/nav-item.html.twig — individual tab <li> + <a>
• bootstrap/tab-content.html.twig — <div class="tab-content"> wrapper
• bootstrap/tab-pane.html.twig — individual tab pane <div>