Semantics · 05
Build resilient navigation
A navigation bar is a list of destinations, and its current destination needs a programmatic state.
What to do
- Put all three links in one ul with li elements.
- Mark Components with aria-current="page" and no other link as current.
- Keep list-style: none; because the list is inside nav, its native semantics remain available in Safari.
Result
Run the checks
Edit the HTML and select “Check solution”. The preview updates automatically.
If you are stuck
Safari can drop list semantics when bullets are removed, except when the list is nested inside nav. Here, the native ul is sufficient without a redundant role="list".