Navigationslinks und aktive Zustände
Erstellen Sie eine Navigation mit klaren aktiven Zuständen über className und aria-current. Halten Sie Links barrierefrei und für kleine Bildschirme geeignet.
Navigationslinks und aktive Zustände ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Warum aktive Zustände wichtig sind
Ziel: Erstellen Sie eine kleine Navigationsleiste und kennzeichnen Sie die aktive Route für Benutzer und Screenreader eindeutig.
- Darstellung aktiver Elemente
- aria-current
- Für kleine Bildschirme geeignetes Layout
Logik für aktive Links & Barrierefreiheit
Ermitteln Sie den aktiven Status eines Links, indem Sie den aktuellen Pfad vergleichen. Verwenden Sie eine deutliche visuelle Darstellung und setzen Sie aria-current="page" für den aktiven Link.
Demo: Aktive Navigation
Wir implementieren einen kleinen Hash-Router und eine Nav-Komponente, die den aktiven Link gestaltet und aria-current setzt.
<div id="root"></div>
Tipps zur Barrierefreiheit
Tipps zur Barrierefreiheit:
- Verwenden Sie echte <a>-Links für die Navigation.
- Setzen Sie aria-current="page" für den aktiven Link.
- Sorgen Sie dafür, dass der Fokus nach der Navigation sichtbar bleibt.
Visuelle Klarheit
Machen Sie aktive Zustände durch Farbe und Kontrast eindeutig. Halten Sie die Touch-Ziele groß (mindestens 40px) und sorgen Sie auf kleinen Bildschirmen für großzügige Abstände.
Stolperfallen
Vermeiden Sie:
- Ausschließlich Hover-Stile zu verwenden – Nutzer von Touch-Geräten sehen diese nicht.
- aria-current für aktive Links zu vergessen.
- Sich nur auf die URL zu verlassen, ohne die Benutzeroberfläche zu aktualisieren.
Best Practice für aktive Zustände
Zusammenfassung
Zusammenfassung: Ermitteln Sie aktive Links anhand des aktuellen Pfads, stellen Sie sie deutlich dar und setzen Sie aria-current="page", damit Screenreader sie erkennen.
Häufig gestellte Fragen
Ist die Lektion „Navigationslinks und aktive Zustände“ kostenlos?
Ja — der vollständige Text von „Navigationslinks und aktive Zustände“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Navigationslinks und aktive Zustände“?
Erstellen Sie eine Navigation mit klaren aktiven Zuständen über className und aria-current. Halten Sie Links barrierefrei und für kleine Bildschirme geeignet. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Navigationslinks und aktive Zustände“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Konzepte des clientseitigen Routings
- Verschachtelte Routen und Routenparameter
- Navigationslinks und aktive Zustände