Navigation Items

Navigation Items sind die einzelnen antippbaren Elemente in der Bottom Navigation. Jedes Item hat ein Icon, optionales Label und führt zu einer bestimmten Aktion. Tippe auf ein Item in der Vorschau, um das Smart Panel mit vier Tabs zu öffnen.

---

Icon & Label Tab

Der Icon & Label Tab steürt das visülle Erscheinungsbild des Items.

Icon

Icon auswählen

Pfad: Icon & Label → Icon → Icon

Tippe auf die Icon-Vorschau, um den Icon-Picker zu öffnen.

Aspekt	Details
Icon-Bibliothek	Material Icons
Suche	Suche nach Icon-Namen
Kategorien	Durchsuche nach Kategorien
Vorschau	Zeigt das Icon in aktueller Farbe und Größe

Icon-Größe

Pfad: Icon & Label → Icon → Icon-Größe

Aspekt	Details
Bereich	16 - 48 px
Schritte	1 px
Standard	24 px
Bedienung	Slider ziehen

Tipp

Größere Icons (28-32 px) eignen sich gut, wenn du Labels ausblendest. Kleinere Icons (20-24 px) funktionieren besser mit Labels.

---

Label

Label anzeigen

Pfad: Icon & Label → Label → Label anzeigen

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	An
Auswirkung	Zeigt/versteckt den Text unter dem Icon

Label-Text

Pfad: Icon & Label → Label → Label-Text

Nur sichtbar wenn “Label anzeigen” aktiviert ist.

Aspekt	Details
Typ	Mehrsprachiges Textfeld
Sprachen	Deutsch, Englisch (je nach App-Konfiguration)
Beispiele	Start, Einstellungen, Profil

Mehrsprachig

Tippe auf das Sprach-Icon, um zwischen den Sprachen zu wechseln. Jede Sprache kann einen eigenen Text haben.

Label-Sichtbarkeit

Pfad: Icon & Label → Label → Label-Sichtbarkeit

Wann das Label angezeigt wird:

Modus	Beschreibung
Immer	Label ist immer sichtbar
Nur wenn ausgewählt	Label erscheint nur beim aktiven Item

---

Schrift-Einstellungen

Nur sichtbar wenn “Label anzeigen” aktiviert ist.

Schriftgröße

Pfad: Icon & Label → Label → Schriftgröße

Aspekt	Details
Bereich	8 - 20 px
Schritte	1 px
Standard	12 px

Schriftstärke

Pfad: Icon & Label → Label → Schriftstärke

Gewicht	Bezeichnung
100	Thin
200	Extra Light
300	Light
400	Normal (Standard)
500	Medium
600	Semi Bold
700	Bold
800	Extra Bold
900	Black

Buchstabenabstand

Pfad: Icon & Label → Label → Buchstabenabstand

Aspekt	Details
Bereich	-2 bis +4 px
Schritte	0.1 px
Standard	0 px

Schriftart

Pfad: Icon & Label → Label → Schriftart

Aspekt	Details
Standard	Roboto
Picker	Durchsuche verfügbare Fonts
Suche	Suche nach Font-Namen
Vorschau	Zeigt Font in Echtzeit

Schriftstil

Pfad: Icon & Label → Label → Schriftstil

Stil	Beschreibung
Normal	Aufrechte Schrift (Standard)
Italic	Kursive Schrift

---

Farben Tab

Der Farben Tab steürt alle Farbwerte des Items für aktiven und inaktiven Zustand.

Light/Dark Mode Toggle

Pfad: Farben-Tab - oben

Wechsle zwischen Light Mode und Dark Mode Bearbeitung. Alle Farbeinstellungen beziehen sich auf den gewählten Modus.

---

Icon-Farben

Icon-Farbe Aktiv

Pfad: Farben → Icon-Farben → Icon-Farbe Aktiv

Farbe des Icons wenn dieses Item ausgewählt ist.

Aspekt	Details
Standard Light	Primärfarbe aus Theme
Standard Dark	Primärfarbe aus Theme (Dark)
Farbwähler	Tippe auf die Farbe für den Picker
Reset	Setzt auf Theme-Farbe zurück

Icon-Farbe Inaktiv

Pfad: Farben → Icon-Farben → Icon-Farbe Inaktiv

Farbe des Icons wenn dieses Item nicht ausgewählt ist.

Aspekt	Details
Standard Light	Sekundärtextfarbe aus Theme
Standard Dark	Sekundärtextfarbe aus Theme (Dark)

---

Label-Farben

Nur sichtbar wenn “Label anzeigen” aktiviert ist.

Label-Farbe Aktiv

Pfad: Farben → Label-Farben → Label-Farbe Aktiv

Textfarbe wenn dieses Item ausgewählt ist.

Aspekt	Details
Standard	Gleich wie Icon-Farbe Aktiv

Label-Farbe Inaktiv

Pfad: Farben → Label-Farben → Label-Farbe Inaktiv

Textfarbe wenn dieses Item nicht ausgewählt ist.

Aspekt	Details
Standard	Gleich wie Icon-Farbe Inaktiv

Konsistente Farben

Für ein harmonisches Design sollten Icon- und Label-Farben im gleichen Zustand übereinstimmen.

---

Container Tab

Der Container Tab steürt den Bereich um Icon und Label eines Items.

Light/Dark Mode Toggle

Pfad: Container-Tab - oben

Wechsle zwischen Light Mode und Dark Mode Bearbeitung.

---

Hintergrund

Hintergrund Aktiv

Pfad: Container → Hintergrund → Hintergrund Aktiv

Hintergrundfarbe des Containers wenn dieses Item ausgewählt ist.

Aspekt	Details
Standard	Primärfarbe mit 10% Deckkraft
Anwendung	Hervorhebung des aktiven Items

Tipp

Ein leicht eingefärbter Hintergrund im aktiven Zustand verstärkt die visülle Rückmeldung beim Tippen.

Hintergrund Inaktiv

Pfad: Container → Hintergrund → Hintergrund Inaktiv

Hintergrundfarbe des Containers wenn dieses Item nicht ausgewählt ist.

Aspekt	Details
Standard	Transparent (0% Deckkraft)

---

Form & Größe

Container-Form

Pfad: Container → Form & Größe → Container-Form

Form	Beschreibung
Rechteck	Eckiger Container (Standard)
Kreis	Runder Container
Pille	Abgerundeter Container (Stadion-Form)

Eckenradius

Pfad: Container → Form & Größe → Eckenradius

Rundung der Ecken (nur relevant bei Rechteck-Form).

Aspekt	Details
Bereich	0 - 50 px
Schritte	1 px
Standard	12 px

Horizontales Padding

Pfad: Container → Form & Größe → Horizontales Padding

Seitlicher Innenabstand des Containers.

Aspekt	Details
Bereich	0 - 40 px
Schritte	1 px
Standard	12 px

Vertikaler Innenabstand

Pfad: Container → Form & Größe → Vertikaler Innenabstand

Oberer und unterer Innenabstand des Containers.

Aspekt	Details
Bereich	0 - 30 px
Schritte	1 px
Standard	8 px

Min. Breite

Pfad: Container → Form & Größe → Min. Breite

Mindestbreite des Containers.

Aspekt	Details
Bereich	40 - 120 px
Schritte	1 px
Standard	60 px

Min. Höhe

Pfad: Container → Form & Größe → Min. Höhe

Mindesthöhe des Containers.

Aspekt	Details
Bereich	30 - 80 px
Schritte	1 px
Standard	40 px

---

Rahmen

Rahmen anzeigen

Pfad: Container → Rahmen → Rahmen anzeigen

Aspekt	Details
Typ	Toggle (An/Aus)
Standard	Aus
Auswirkung	Zeigt einen Rahmen um den Container

Rahmenbreite

Pfad: Container → Rahmen → Rahmenbreite

Nur sichtbar wenn “Rahmen anzeigen” aktiviert ist.

Aspekt	Details
Bereich	0.5 - 10 px
Schritte	0.5 px
Standard	1 px

Rahmen Aktiv

Pfad: Container → Rahmen → Rahmen Aktiv

Rahmenfarbe wenn dieses Item ausgewählt ist.

Aspekt	Details
Standard	Primärfarbe aus Theme

Rahmen Inaktiv

Pfad: Container → Rahmen → Rahmen Inaktiv

Rahmenfarbe wenn dieses Item nicht ausgewählt ist.

Aspekt	Details
Standard	Sekundärtextfarbe mit 30% Deckkraft

---

Verhalten Tab

Der Verhalten Tab steürt, was passiert wenn das Item angetippt wird.

Aktion & Ziel

Pfad: Verhalten → Aktion & Ziel

Der Action Target Picker ermöglicht die Konfiguration der Item-Aktion.

Aktionstyp

Typ	Beschreibung
Seite öffnen	Navigiert zu einer bestimmten Route
Dialog öffnen	Zeigt einen modalen Dialog
Menü anzeigen	Öffnet ein Kontextmenü

Ziel-Route

Nur sichtbar bei Aktionstyp “Seite öffnen”.

Aspekt	Details
Auswahl	Liste verfügbarer Routen
Kategorien	Häufige Routen, Module, Custom
Eingabe	Oder manuell Route eingeben

Häufige Routen:

Route	Beschreibung
/home	Startseite
/feed	Feed/Timeline
/profile	Benutzerprofil
/settings	Einstellungen
/search	Suche
/chat	Chat/Nachrichten
/favorites	Favoriten

Dialog bearbeiten

Nur sichtbar bei Aktionstyp “Dialog öffnen”. Öffnet den Dialog-Editor.

Menü bearbeiten

Nur sichtbar bei Aktionstyp “Menü anzeigen”. Öffnet den Menü-Editor.

---

Item-Verwaltung

Neüs Item hinzufügen

1. Tippe auf Element hinzufügen in der Toolbar
2. Wähle Navigation Item
3. Das neü Item erscheint in der Navigation
4. Tippe darauf, um es zu konfigurieren

Item duplizieren

1. Halte das Item lange gedrückt
2. Wähle Duplizieren im Kontextmenü
3. Eine Kopie erscheint neben dem Original

Item löschen

1. Halte das Item lange gedrückt
2. Wähle Löschen im Kontextmenü
3. Bestatige die Löschung

Achtung

Gelöschte Items können nicht wiederhergestellt werden. Speichere vorher, wenn du unsicher bist.

Items sortieren

1. Aktiviere den Neuordnen-Modus in der Toolbar
2. Halte ein Item gedrückt und ziehe es
3. Lasse an der gewünschten Position los
4. Beende den Neuordnen-Modus

---

Tipps

Icon-Konsistenz

Verwende Icons aus der gleichen Icon-Familie für ein einheitliches Erscheinungsbild. Material Icons bieten viele Varianten (Filled, Outlined, Rounded, Sharp).

Label-Sichtbarkeit

“Nur wenn ausgewählt” spart Platz und lenkt den Fokus auf das aktive Item. Verwende es bei 5 Items oder bei beengtem Platz.

Container-Styling

Die Pille-Form mit eingefärbtem Hintergrund im aktiven Zustand ist ein moderner Material You Stil. Kombiniere sie mit einem passenden Indikator-Typ.

Aktive/Inaktive Kontraste

Stelle sicher, dass der Unterschied zwischen aktivem und inaktivem Zustand deutlich erkennbar ist - sowohl bei Farben als auch bei der Deckkraft.

---

Zurück zur Übersicht

Bottom Navigation Übersicht Zurück zur Hauptseite

Hintergrund konfigurieren Navigations-Hintergrund anpassen

FAB einrichten Floating Action Button konfigurieren