Resizable Navigation Area in TYPO3

Desirée Lochner

19 January 2022

A laptop is depicted alongside a vertical list with arrows indicating data transfer or movement, set against an abstract orange background with circular patterns.

For larger sites with lots of pages, the Page Tree improvements in v11 mean an easier work day for everyone.

This post is part of our TYPO3 Version 11 Series. We’re shining a spotlight on some of the really useful features in version 11 and why you should upgrade.

The Page Tree is one of the key concepts of TYPO3. It brings a Windows Explorer-like experience to navigating the backend of your website. It presents a hierarchical structure of your website pages, making it easy for editors to connect the dots and get a feeling for how your site hangs together.

The Page Tree received a major overhaul in TYPO3 v9, when a legacy component was removed, moving the Page Tree to an SVG-based rendering engine. This brought performance improvements, and was especially important for sites with large numbers of pages.

Problem with nested pages and long page titles

However, there was one missing piece that our customers complained about after upgrading to TYPO3 v9. If you have a large number of pages, or pages with a lot of text, you could not resize the visible area of the page tree. To address this, we used an extension called “pagetree_resizable“ by Wolfgang Klinger for TYPO3 v9- and v10-based projects.

TYPO3 v11: Resizing and collapsing

Fast forward to TYPO3 v11, and this feature has landed in TYPO3 Core—with further improvements. Collapsing and expanding the tree now happens right next to the tree. To resize the tree, you can click the right side of the tree border, and drag the mouse to the size you need. The selected size is kept in the user’s preferences.

Bonus Feature

Both the flexible resizing and the collapsing feature are not limited to the Page Tree next to the modules. The folder tree in the File List module works exactly the same way. And since we’re talking about improvements, the tree components in the Element Browser and Link Pickers also have the resizable navigation area as well.

What are you waiting for? Upgrade now!

TYPO3 v11 will be a life-saver and is going to improve your productivity, especially when dealing with larger projects that have more than 500 pages. If you need support when upgrading to TYPO3 v11, give us a call!