---
title: "Feature: #103211 - Introduce tree node labels"
manual: "TYPO3 Core Changelog"
version: "main"
permalink: "https://docs.typo3.org/permalink/changelog:feature-103211-1709036591"
source: "Changelog/13.1/Feature-103211-IntroduceTreeNodeLabels.rst"
typo3-version: "13.1"
typo3-major: 13
type: "feature"
issue: 103211
forge: "https://forge.typo3.org/issues/103211"
tags: ["Backend", "JavaScript", "TSConfig", "ext:backend"]
rendered: "2026-09-19T12:12:50+00:00"
---

# Feature: #103211 - Introduce tree node labels {#feature-103211-1709036591}

See [forge#103211](https://forge.typo3.org/issues/103211)

## Description {#description}

We've upgraded the backend tree component by extending tree nodes to
incorporate labels, offering enhanced functionality and additional
information.

Before the implementation of labels, developers and integrators
relied on `pageTree.backgroundColor.<pageid>` for visual cues,
which has been [deprecated](https://docs.typo3.org/permalink/changelog:deprecation-103211-1709038752) with TYPO3 v13.
However, these background colors lacked accessibility and meaningful context,
catering only to users with perfect eyesight and excluding those
dependent on screen readers or contrast modes.

With labels, we now cater to all editors. These labels not only offer
customizable color markings for tree nodes but also require an
associated label for improved accessibility.

Each node can support multiple labels, sorted by priority, with the
highest priority label taking precedence over others. Users can
assign a label to a node via user TSconfig, noting that only one label
can be set through this method.

**EXT:my_extension/Configuration/user.tsconfig**

```typoscript
options.pageTree.label.<pageid> {
    label = Campaign A
    color = #ff8700
}
```

Labels also support locallang keys:

**EXT:my_extension/Configuration/user.tsconfig**

```typoscript
options.pageTree.label.<pageid> {
    label = LLL:EXT:my_extension/Resources/Private/Language/locallang.xlf:labels.pageTree.campaign
    color = #ff8700
}
```

The labels can also be added by using the event
`\TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent`.

**EXT:my_extension/Classes/Backend/EventListener/ModifyPageTreeItems.php**

```php
<?php

declare(strict_types=1);

namespace MyVendor\MyExtension\Backend\EventListener;

use TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent;
use TYPO3\CMS\Backend\Dto\Tree\Label\Label;
use TYPO3\CMS\Core\Attribute\AsEventListener;

#[AsEventListener(
    identifier: 'my-extension/backend/modify-page-tree-items',
)]
final readonly class ModifyPageTreeItems
{
    public function __invoke(AfterPageTreeItemsPreparedEvent $event): void
    {
        $items = $event->getItems();
        foreach ($items as &$item) {
            // Add special label for all pages with parent page ID 123
            if (($item['_page']['pid'] ?? null) === 123) {
                $item['labels'][] = new Label(
                    label: 'Campaign B',
                    color: '#00658f',
                    priority: 1,
                );
            }
        }
        $event->setItems($items);
    }
}
```

Please note that only the marker for the label with the highest priority is
rendered. All additional labels will only be added to the title of the node.

## Impact {#impact}

Labels are now added to the node and their children, significantly
improving the clarity and accessibility of the tree component.