Wochenupdate: Dieselbe Navigation für Desktop und Mobil

@trunkjs/element-relocator ist eine neue öffentlich verfügbare Softwarekomponente aus dem TrunkJS-Projekt. Sie kann ein bereits vorhandenes HTML-Element an eine andere Stelle einer Webseite verschieben und später exakt an seinen ursprünglichen Platz zurücksetzen.

Das ist beispielsweise für Navigationen nützlich, deren Anordnung sich an die verfügbare Bildschirmbreite anpasst. Statt getrennte Desktop- und Mobilmenüs zweimal im HTML zu erzeugen, kann derselbe Navigationsbereich erhalten bleiben:

<nav id="navigation">…</nav>

<tj-element-relocator
  source="#navigation"
  class="md:relocate">
</tj-element-relocator>

Der Relocator selbst markiert im Dokument die Zielposition. Die Logik der Website setzt abhängig von der Bildschirmbreite das HTML-Kennzeichen relocate, das die Verschiebung auslöst. Beim ersten Verschieben hinterlässt die Komponente einen unsichtbaren Anker an der alten Stelle. Wird das Kennzeichen entfernt, kehrt die Navigation dorthin zurück – auch wenn sich andere Elemente auf der Seite inzwischen verändert haben.

Die Komponente ist als Custom Element umgesetzt, also als selbst definierter HTML-Baustein. Sie unterstützt Ziele innerhalb des Relocators sowie unmittelbar davor oder dahinter.

Der wichtige Architekturpunkt: Das Paket kennt keine Bildschirmbreiten. Die responsive Regel entscheidet, wann verschoben wird; der Relocator entscheidet nur, wohin. Kleine Werkzeuge sind angenehm, wenn sie nicht heimlich Abteilungsleiter spielen.

Öffentliche Änderung

• TrunkJS Pull Request 28, zusammengeführt am 1. September 2026

Quellenstand: 5. September 2026.