Zurück

TabBar: Eine neue Generation ist da

on 

Mit der neuen TabBar bereichern wir die Navigation deiner Apps um 3 neue Layouts, mehr Anpassungsmöglichkeiten, Auswahlanimationen und einen Multi-Device-Ansatz, der für jeden Bildschirm konzipiert ist.

In einer Mobile App geht es bei der Navigation nicht nur darum, von einem Bereich zum nächsten zu wechseln. Sie strukturiert das Erlebnis, schafft starke visuelle Orientierungspunkte und trägt direkt zur Gesamtwahrnehmung des Produkts bei. Mit der neuen TabBar-Komponente eröffnen wir eine neue Etappe im Navigationsdesign – mit mehr gestalterischer Freiheit, mehr Flexibilität in der Anpassung und einer feineren Abstimmung auf jedes Gerät.

Drei neue Layouts, die den Ton angeben

Diese neue Generation der TabBar kommt mit drei Layouts, die direkt zum Launch verfügbar sind: Bold TabBar, Minimal TabBar und Clean TabBar.

  • Bold TabBar verleiht der Navigation mehr Präsenz, mit einer starken und klar gesetzten visuellen Struktur.
  • Minimal TabBar verfolgt einen moderneren, kompakteren Ansatz.
  • Clean TabBar bietet eine elegante Balance – mit einer aufgeräumten, vielseitigen Optik, die sich leicht in unterschiedlichste grafische Welten integrieren lässt.

Mit diesen drei Richtungen wird die Navigationsleiste zu einem echten Stilhebel. Sie lässt sich präziser an die Identität der App anpassen – ob es sich um ein redaktionelles Projekt, eine Marken-App, einen Service, ein Lifestyle-Universum oder eine E-Commerce-Anwendung handelt.

Eine TabBar mit mehr Anpassungsmöglichkeiten

Die neue Komponente beschränkt sich nicht auf neue Layouts. Sie ist Teil der kontinuierlichen Weiterentwicklung des GoodBarber Design Systems und erweitert die Möglichkeiten, die Navigation zu personalisieren. Hintergründe, Formen, Schatten, Aufbau der Items, ausgewählte Zustände, "More"-Menü, Varianten je nach Gerät: Jede Dimension wurde durchdacht, um mehr Präzision in der Darstellung zu bieten und gleichzeitig die visuelle Kohärenz der App zu wahren. Diese neue TabBar verkörpert voll und ganz den Anspruch unseres Design Systems: mehr kreative Freiheit, ohne je Abstriche bei der Ausführungsqualität zu machen.

Die Auswahlanimationen begleiten diese Entwicklung, indem sie Interaktionen flüssiger machen, Zustandswechsel besser lesbar gestalten und für ein noch feiner abgestimmtes Interface-Gefühl sorgen.

Auf iOS und PWA kann die neue TabBar zusätzlich von Material-Blur-Effekten profitieren, die Tiefe und einen noch hochwertigeren Touch in die visuelle Darstellung bringen.

Eine Navigation, die für jeden Bildschirm gedacht ist

Diese Entwicklung spiegelt auch einen ausgeprägteren Multi-Device-Ansatz wider. Auf dem Mobilgerät behält die TabBar ihre natürliche Position am unteren Bildschirmrand. Auf dem Desktop wird sie vertikal, um den verfügbaren Raum besser zu nutzen und sich in die Nutzungsgewohnheiten von Großbildschirm-Interfaces einzufügen.

Diese Entscheidung führt die Mobile-First-Logik von GoodBarber konsequent weiter und etabliert zugleich eine echte Anpassungsqualität auf dem Desktop. Es geht nicht einfach darum, überall dieselbe Navigation anzuzeigen, sondern darum, ein zu jedem Nutzungskontext stimmiges Erlebnis zu bieten.

Eine neue Etappe für das Design von Apps auf GoodBarber

Mit dieser neuen Komponente erweitert GoodBarber die Möglichkeiten für alle, die eine Mobile App mit Premium-Design erstellen wollen – ohne die für No-Code typische Produktionseinfachheit zu verlassen.

Ausdrucksstärker, anpassbarer, flüssiger und besser für jeden Bildschirm gedacht: Diese neue TabBar gibt der Navigation in GoodBarber Apps eine neue Dimension. Eine Entwicklung, die zugleich die wahrgenommene Qualität der Interfaces und die kreative Freiheit für Designer:innen, Marken, Medien und alle App-Creator stärkt.