Navigation Links & Active States
Build navigation with clear active states using className and aria-current; keep links accessible and small-screen friendly.
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.
All lessons in this course
- Client-side Routing Concepts
- Nested Routes & Route Params
- Navigation Links & Active States