---
title: "Den Seitenmodul-Header zähmen—Warum wir EXT:page_info_tabs entwickelt haben"
url: "https://b13.com/knowledge/taming-the-page-module-header-why-we-built-extpage-info-tabs"
description: "Wenn mehrere TYPO3-Extensions Inhalte im Page Module Header stapeln, wird es schnell unübersichtlich. EXT:page_info_tabs strukturiert alles automatisch in übersichtliche Tabs—ohne Anpassungen an bestehenden Extensions."
image: "https://b13.com/fileadmin/_processed_/1/f/csm_PageInfoTabs_Sharing_c32681762b.png"
date: 2026-03-03
modified: 2026-08-19
lastUpdated: 2026-08-19
---
# Den Seitenmodul-Header zähmen—Warum wir EXT:page_info_tabs entwickelt haben
[ Tool-Tip ](https://b13.com/knowledge/tool-tip) [ Open Source ](https://b13.com/knowledge/open-source)
Taming the Page Module Header—Why We Built EXT:page\_info\_tabs
=================================================================
David Steeb
31 March 2026
[ RSS Feed ](https://b13.com/rss.xml)
Anyone who regularly works with TYPO3 installations that use multiple extensions knows the situation: the page module header cn become a growing stack of content from various sources—view statistics, blog metadata, SEO overviews—all rendered one below the other with no visual separation or structure.
With just one extension contributing to the header, everything looks fine. The moment a second or third extension enters the picture, the page module header turns into an unstructured wall of HTML. Finding the information you need means scrolling through content blocks that were never designed to coexist.
This is exactly the kind of small but impactful problem we love solving at b13: a focused, self-contained feature that improves daily editorial workflows without requiring changes to any existing extension. That’s why we built EXT:page\_info\_tabs.
The Problem: A Growing Stack of Unrelated Content
---------------------------------------------------
TYPO3 provides a clean mechanism for extensions to add content to the page module header: `ModifyPageLayoutContentEvent` and its `addHeaderContent() `method. This is well-designed and works perfectly—as long as only one extension uses it.
The reality in most projects looks different. As soon as multiple extensions contribute content—and they increasingly do—the header becomes a vertical stack of unrelated HTML blocks. There is no built-in way to separate, label, or organize these sections.
In a recent project, we had multiple extensions contributing to the page module header: a blog extension adding post metadata, a view tracker showing page statistics, an SEO tool rendering optimization hints, a translation overview, and custom project-specific information. The result was a header area that required significant scrolling before editors even reached the actual page content.
The core issue is structural: TYPO3 collects all header content into a single output. There is no concept of sections, grouping, or navigation. Every extension simply appends its HTML, and the result is whatever happens to come out.
How EXT:page\_info\_tabs Works
--------------------------------
The core idea behind page\_info\_tabs is deliberately simple: automatically organize page module header content into Bootstrap 5 tabs—without requiring any changes to existing extensions.
The extension works by decorating TYPO3’s `EventDispatcherInterface`. It captures the content that each `ModifyPageLayoutContentEvent` listener adds and turns every listener’s output into its own tab. This is the key design decision: no extension needs to know about page\_info\_tabs. No code changes, no additional event listeners, no configuration in third-party extensions.
The behavior adapts gracefully to what’s actually present:
- **0 sections:** nothing is rendered
- **1 section:** content is rendered directly, without tabs (no unnecessary UI)
- **2+ sections:** Bootstrap 5 tabs, sorted by configurable priority
Tab labels are auto-detected from HTML patterns in each extension’s output. The extension looks for CSS classes like `blog-pageheader`, `tx-ext-key`, or `data-extension` attributes. This means most extensions get a meaningful label right away, without any configuration at all.
Since the TYPO3 backend already loads Bootstrap’s tab JavaScript, no additional JS is needed for tab switching. A small resize-event helper is included to fix chart libraries (Frappe Charts, Chart.js, etc.) that render incorrectly inside initially hidden tab panes. And the most recently used tab is remembered in `localStorage`, so editors automatically return to their last-used view when navigating between pages.
Designed for Stability With Unknown Third-Party Content
---------------------------------------------------------
One of the core challenges with this kind of extension is that it needs to work reliably with content from any third-party extension—extensions whose HTML structure, CSS classes, and JavaScript behavior are entirely outside of our control.
This is why we chose the decorator pattern over a more invasive approach. EXT:page\_info\_tabs does not modify, rewrite, or interfere with the HTML that other extensions produce. It simply wraps each extension’s output in a tab pane. The content inside each tab is exactly what the original extension rendered—untouched.
This design ensures that:
- Existing extensions continue to work exactly as before
- JavaScript initialization in third-party extensions remains intact
- CSS scoping is preserved—no class name conflicts
- If page\_info\_tabs is removed, everything gracefully falls back to the default stacked behavior
This approach fits our philosophy at b13 for building small, focused extensions: solve one well-defined problem, keep the scope tight, require minimal configuration, and make sure the extension plays nicely with everything else in the system. An extension that organizes third-party content must be especially careful not to break it.
Installation
--------------
Installation works as usual via Composer:
`composer require b13/page-info-tabs`
That’s it. All existing extensions that use `addHeaderContent()` will automatically get their own tab. No additional configuration steps are required.
Configuring Labels and Priorities
-----------------------------------
Default labels are provided for known extensions. The auto-detection works well for most setups, but labels and priorities can be customized explicitly when needed.
To customize or add labels, set them in your ext\_localconf.php or AdditionalConfiguration.php:
```
1
2
3
```
```
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['labels']['view_tracker'] = 'Page Views';
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['labels']['blog'] = 'Blog';
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['labels']['my_extension'] = 'My Label';
```
Priorities control the tab order (lower value = further left):
```
1
```
```
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['priorities']['view_tracker'] = 20; $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['priorities']['blog'] = 10;
```
Finding the Right Extension Key
---------------------------------
Each tab panel includes an HTML comment with the detected key. Open your browser’s developer tools and inspect the tab content to find it:
`\`
Use that key in your label and priority configuration. The key is auto-detected from HTML patterns in the following order:
1. `data-extension=“my_ext”` attribute (most reliable—extensions can add this explicitly)
2. CSS classes like `my-ext-pageheader `or `my-ext-widget`
3. TYPO3 convention classes: `tx-my-ext` or `tx_my_ext`
4. b13 JS hooks: `bJS_txMyExt`
5. `EXT:my_ext/` references in `src`/`href` attributes
If auto-detection produces an unexpected key, you can either configure a label for that key directly, or ask the extension author to add a `data-extension` attribute to their HTML output.
Explicit Section Registration (Optional)
------------------------------------------
Extensions that want full control over their tab label, priority, and content can listen to CollectPageInfoSectionsEvent instead. Explicit sections take precedence over auto-captured content from the same extension.
`use B13\PageInfoTabs\Event\CollectPageInfoSectionsEvent;`
`use B13\PageInfoTabs\Model\Section;`
`use TYPO3\CMS\Core\Attribute\AsEventListener;`
`#[AsEventListener]`
`final class MyPageInfoSection{ `
` public function __invoke( `
` CollectPageInfoSectionsEvent $event `
` ): void {`
` $event->addSection(`
` new Section( `
` identifier: 'my-extension', `
` label: 'My Label', `
` content: 'Your HTML here
', `
` priority: 50, `
` )`
` ); `
` }`
`}`
This API is intentionally straightforward: a single event, a simple value object, and clear precedence rules. Extension developers can adopt it in minutes.
Conclusion
------------
EXT:page\_info\_tabs is a small extension that solves a real everyday problem in the TYPO3 backend. It takes content from any number of third-party extensions—content that was never designed to coexist—and organizes it into a clean, navigable tab interface.
What makes this extension particularly useful is what it does not require: no changes to existing extensions, no complex configuration, no custom JavaScript. Install it, and the page module header is instantly organized.
This is exactly the kind of extension we believe in at b13: focused on a single, well-defined problem. Small enough to be fully maintainable. Stable enough to work reliably with content from unknown third-party sources. And designed to simply work out of the box while remaining configurable when needed.
Documentation and source code are available on GitHub:
[ Go to GitHub ](https://github.com/b13/page-info-tabs)
**Curious to Learn More?**
In larger TYPO3 installations with many extensions contributing to the page module, a structured header makes a noticeable difference for editorial workflows.
If you need support introducing EXT:page\_info\_tabs or integrating it into an existing TYPO3 project, feel free to get in touch with us.
[ Get in touch ](https://b13.com/contact)
### Written by:
b13 Founder and CEO, David, is someone you’ll meet if you’re thinking about working with our agency. He is constantly learning new skills and is an influential part of our cutting-edge frontend practice.
David Steeb CEO
[ more from David Steeb ](https://b13.com/team/david-steeb)
Related Articles
------------------
- 
### Clean Phone Numbers in TYPO3: Why We Built EXT:phone\_number
11 August 2026 | David Steeb
TYPO3 stores phone numbers as tel: links, but doesn’t format them for output. Meet EXT:phone\_number, a Fluid ViewHelper for clean, consistent numbers.
[ Read more: Clean Phone Numbers in TYPO3: Why We Built EXT:phone\_number ](https://b13.com/knowledge/clean-phone-numbers-in-typo3)
- 
### T3ppy Gives TYPO3 a Friendly Face
06 August 2026 | Florian “Flix” Keitgen
TYPO3 is powerful—but it doesn’t have to feel impersonal. Meet T3ppy, our friendly companion for the backend.
[ Read more: T3ppy Gives TYPO3 a Friendly Face ](https://b13.com/knowledge/t3ppy-design-kit)
- 
### AI Content in TYPO3: Labelling Needs Accountability
02 August 2026 | Benni Mack
The EU AI Act brings the origins of AI-generated content into focus. AI Label marks AI-generated and AI-edited content in TYPO3 and records who signed off the published version—for…
[ Read more: AI Content in TYPO3: Labelling Needs Accountability ](https://b13.com/knowledge/ai-content-in-typo3-labelling-needs-accountability)
- 
### Stop Buying Platforms. Start Building Ecosystems.
09 June 2026 | David Steeb
The first TYPO3 Summit North America opened with a keynote that reframes how enterprise teams should think about content management—from platforms to ecosystems, from vendor…
[ Read more: Stop Buying Platforms. Start Building Ecosystems. ](https://b13.com/knowledge/stop-buying-platforms-start-building-ecosystems)
- 
### Notes from Atlanta—What the First TYPO3 Summit North America Says About the Next Decade of Enterprise CMS
22 May 2026 | David Steeb
Field report from the first TYPO3 Summit North America in Atlanta. On governance that can’t be acquired, predictable seven-year lifecycles, the FAIR distribution layer, and why the…
[ Read more: Notes from Atlanta—What the First TYPO3 Summit North America Says About the Next Decade of Enterprise CMS ](https://b13.com/knowledge/atlanta-typo3-summit-north-america-enterprise-cms)
- 
### Happy Release Day TYPO3 v14: Why This Release Shows the True Strength of Open Source
21 April 2026 | Florian “Flix” Keitgen
TYPO3 v14 improves workflows for editors, marketing teams, and developers—and shows how community-driven open source creates real impact.
[ Read more: Happy Release Day TYPO3 v14: Why This Release Shows the True Strength of Open Source ](https://b13.com/knowledge/happy-release-day-typo3-v14-why-this-release-shows-the-true-strength-of-open-source)
- 
### Unlocking TYPO3’s Hidden Gem: The Backend User Section (Doktype 6)
05 March 2026 | David Steeb
Discover TYPO3’s underrated doktype 6 (Backend User Section) for secure internal previews, editor training, and prototyping. Learn real use cases, common pitfalls like 403 errors…
[ Read more: Unlocking TYPO3’s Hidden Gem: The Backend User Section (Doktype 6) ](https://b13.com/knowledge/backend-user-section-in-typo3-uses-pitfalls-helper)
- 
### The Internet Is No Longer Just for Humans—AI Bots Love Markdown
28 January 2026 | Benni Mack
Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems.
[ Read more: The Internet Is No Longer Just for Humans—AI Bots Love Markdown ](https://b13.com/knowledge/the-internet-is-no-longer-just-for-humans-ai-bots-love-markdown)
- 
### What’s New in TYPO3 v13?
20 January 2026 | Desirée Lochner
TYPO3 v13 marks the beginning of a new era of user-friendliness. The version impresses with a modern, fresh, and incredibly high-performance user interface—developed for anyone who…
[ Read more: What’s New in TYPO3 v13? ](https://b13.com/solutions/typo3/whats-new-in-typo3-v13)
- 
### CMS Kickoff 2026: Perspectives on AI, Open Source, and Digital Sovereignty
19 January 2026 | David Steeb
CMS Kickoff 2026 in Florida brought together agencies, CMS experts, and open source communities to discuss AI, digital sovereignty, and the future of content management systems…
[ Read more: CMS Kickoff 2026: Perspectives on AI, Open Source, and Digital Sovereignty ](https://b13.com/knowledge/cms-kickoff-2026)