Navigationsleiste mit Untermenüs

NAVIGATIONSLEISTE (mit Untermenüs!!!) - ganz ohne Bildschirme!

Ich zeige dir eine völlig neue und einfache Methode, um Navigationsleisten in deine Power Apps einzubauen – ganz ohne die klassische Navigate-Funktion! Stattdessen nutzen wir Container und das moderne Steuerelement Registerkarte (TabList).

Damit kannst du nicht nur elegante Hauptmenüs, sondern auch Untermenüs erstellen – ideal, um komplexe Apps übersichtlich und benutzerfreundlich zu gestalten. Am Ende erfährst du außerdem, wie du bestehende Apps auf das neue System umstellst.

Warum diese Methode?

Die klassische Navigation über mehrere Bildschirme ist oft unübersichtlich und schwer zu pflegen. Mit der Kombination aus Containern und Registerkarten erhältst du:

• eine klar strukturierte Benutzeroberfläche,
• eine flüssige Navigation ohne Bildschirmwechsel,
• und die Möglichkeit, Unterseiten direkt in Container zu integrieren.

Schritt 1: Moderne Steuerelemente aktivieren

Bevor du mit den Registerkarten arbeiten kannst, musst du zunächst die modernen Steuerelemente aktivieren:

1. Im Power Apps Editor oben rechts auf die drei Punkte klicken.
2. Einstellungen öffnen.
3. Links den Bereich Updates auswählen.
4. Dort die Option Moderne Steuerelemente und Designs aktivieren.

Sollte diese Option nicht sofort sichtbar sein, einfach nach „Modern“ suchen. Danach stehen die neuen Steuerelemente unter Einfügen zur Verfügung.

Hinweis: Die modernen Steuerelemente sind noch in der Entwicklung und experimentelle Features – einige davon können Fehler enthalten und der Funktionsumfang kann seitens Microsoft jederzeit verändert werden. Die Registerkarte funktioniert aktuell jedoch stabil und wird bei PowerAppsTrainer bereits aktiv eingesetzt.

Schritt 2: Navigationsleiste erstellen

Die Registerkarten findest du jetzt unter Einfügen → Eingabe → Registerkartenliste.
Nach dem Einfügen zeigt Power Apps standardmäßig drei Items (Item 1, Item 2, Item 3). Diese kannst du jetzt an deine Bedürfnisse anpassen.

Für mein Beispiel verwende ich folgende Registerkarten:

TabList_Navigation
Items = ["Startseite";"Bestellungen";"Einstellungen"]

Schritt 3: Container für die Navigation einfügen

Anstatt mit mehreren Bildschirmen zu arbeiten, legen wir Container an, die jeweils einen „Bildschirm“ darstellen.
Jeder Container repräsentiert einen Bereich deiner App – etwa Startseite, Bestellungen oder Einstellungen.

Über die Visible-Eigenschaft steuerst du, welcher Container angezeigt wird:

Container_Startseite (1):
Visible = TabList_Navigation.Selected.Value = "Startseite"

Container_Bestellungen (2):
Visible = TabList_Navigation.Selected.Value = "Bestellungen"

Container_Startseite (3):
Visible = TabList_Navigation.Selected.Value = "Einstellungen"

Bonus 1: Navigation über Variable

Ich empfehle dir, die Navigation über eine globale Variable festzulegen, sodass du diese auch aus anderen Quellen wie z.B. einem Button, steuern kannst.

App:
OnStart = Set(var_Navigation;"Startseite")

TabList_Navigation:
OnChange = Set(var_Navigation;TabList_Navigation.Selected.Value)

Container_Startseite (1):
Visible = var_Navigation = "Startseite"

Container_Bestellungen (2):
Visible = var_Navigation = "Bestellungen"

Container_Startseite (3):
Visible = var_Navigation = "Einstellungen"

Schritt 4: Untermenüs hinzufügen

Das System lässt sich problemlos erweitern – etwa mit einem Untermenü im Bereich Bestellungen.
Dafür fügst du eine weitere Registerkarte innerhalb des Containers Bestellungen ein, z. B. mit den Items:

TabList_Navigation_Bestellungen
Items = ["Übersicht";"Einkaufswagen"]

App
OnStart = Set(var_Navigation_Bestellungen;"Übersicht")

Danach musst du wieder Untercontainer einfügen, die die entsprechenden Bildschirme repräsentieren.

Bonus 2: Bestehende Bildschirme übernehmen

Wenn du bereits ältere Apps hast, kannst du diese einfach migrieren:

1. Öffne den alten Bildschirm.
2. Markiere alle Steuerelemente mit Strg + A.
3. Kopiere sie (Strg + C) und füge sie im neuen Container ein (Strg + V).
4. Überarbeite alle bestehenden Navigate Funktionen und definiere stattdessen die entsprechende globale Variable.

So überführst du Schritt für Schritt deine App ins neue Navigationssystem – ganz ohne Funktionsverlust.

Button Einkaufwagen
OnSelect = Navigate(Scr_Einkaufswagen;ScreenTransition.Fade)
OnSelect = Set(var_Navigation_Bestellungen;"Einkaufwagen")

Ich hoffe, diese Anleitung hilft dir dabei, die Navigation in deinen Power Apps benutzerfreundlich und ansprechend zu gestalten.

Melde dich gerne für meinen Newsletter an, in dem ich dir Tipps und Tricks rund um Power Apps & Power Automate zusende.

 Hier geht's zum Detailvideo: