Navigeringslänkar och aktiva tillstånd
Bygg navigering med tydliga aktiva tillstånd med hjälp av className och aria-current; håll länkarna tillgängliga och anpassade för små skärmar.
Navigeringslänkar och aktiva tillstånd är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför aktiva tillstånd är viktiga
Mål: Bygg ett litet navigeringsfält och visa tydligt för användare och skärmläsare vilken aktiv route som visas.
- Stil för aktiva tillstånd
- aria-current
- Layout anpassad för små skärmar
Logik för aktiva tillstånd och a11y
Beräkna om en länk är aktiv genom att jämföra den aktuella sökvägen. Lägg till en tydlig visuell stil och ange aria-current="page" på den aktiva länken.
Demo: aktiv navigering
Vi implementerar en liten hash-router och en Nav-komponent som utformar den aktiva länken och anger aria-current.
<div id="root"></div>
Tillgänglighetstips
A11y-tips:
- Använd riktiga <a>-länkar för navigering.
- Ange aria-current="page" på den aktiva länken.
- Se till att fokus fortfarande syns efter navigering.
Visuell tydlighet
Gör aktiva tillstånd tydliga med färg och kontrast. Håll tryckytorna stora (minst 40px) och använd generösa mellanrum på små skärmar.
Fallgropar
Undvik:
- Att bara använda hover-stilar – användare på pekskärmar ser dem inte.
- Att glömma aria-current på aktiva länkar.
- Att enbart förlita sig på URL:en utan att uppdatera gränssnittet.
Bästa praxis för aktiva tillstånd
Sammanfattning
Sammanfattning: Beräkna aktiva länkar från den aktuella sökvägen, utforma dem tydligt och ange aria-current="page" för att hjälpa skärmläsare.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Navigeringslänkar och aktiva tillstånd” gratis?
Ja – hela texten till ”Navigeringslänkar och aktiva tillstånd” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Navigeringslänkar och aktiva tillstånd”?
Bygg navigering med tydliga aktiva tillstånd med hjälp av className och aria-current; håll länkarna tillgängliga och anpassade för små skärmar. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.
Hur lång tid tar lektionen ”Navigeringslänkar och aktiva tillstånd”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Koncept för routing på klientsidan
- Nästlade routes och route-parametrar
- Navigeringslänkar och aktiva tillstånd