Navigation Links & Active States
Build navigation with clear active states using className and aria-current; keep links accessible and small-screen friendly.
Navigation Links & Active States is a free React Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why active states matter
Goal: Build a small nav bar and indicate the active route clearly for users and screen readers.
- Active styling
- aria-current
- Small-screen friendly layout
Active logic & a11y
Compute a link's active state by comparing the current path. Add a strong visual style and set aria-current="page" on the active link.
Demo: active nav
We implement a tiny hash router and a Nav component that styles the active link and sets aria-current.
<div id="root"></div>
Accessibility tips
A11y tips:
- Use real <a> links for navigation.
- Set aria-current="page" on the active link.
- Keep focus visible after navigation.
Visual clarity
Make active states obvious with color and contrast; keep touch targets large (min 40px) and spacing generous for small screens.
Pitfalls
Avoid:
- Only using hover styles—touch users won't see them.
- Forgetting aria-current on active links.
- Relying on URL only without updating UI.
Active state best practice
Recap
Recap: Compute active links from the current path, style them clearly, and set aria-current="page" to help screen readers.
Frequently asked questions
Is the “Navigation Links & Active States” lesson free?
Yes — the full text of “Navigation Links & Active States” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Navigation Links & Active States”?
Build navigation with clear active states using className and aria-current; keep links accessible and small-screen friendly. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Navigation Links & Active States” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Client-side Routing Concepts
- Nested Routes & Route Params
- Navigation Links & Active States