Side navigation
A sidebar section nav with a clear current-page indicator that does not rely on colour.
Using the side navigation accessibly
Use a side nav for a single section's sub-pages or in-page sections, where a flat list of related destinations helps people orient and move between them.
Do
- Give the
<nav>anaria-labelthat distinguishes it from other navs on the page. - Mark the current item with
aria-current="page"and signal it with a border and bolder weight, not colour alone. - Keep links keyboard reachable with visible focus and targets at least 44 by 44 pixels.
Don't
- Don't rely on colour alone to show the current page.
- Don't nest the list more than a level or two deep.
- Don't cram targets so tightly that they fall under 44 pixels or are hard to tab through.
Build it right
- Wrap the links in a
<nav>with a uniquearia-label. - Set
aria-current="page"on the active link and back it with a border plus weight change. - Ensure every link is keyboard reachable with a clear focus indicator.
- Give each target a hit area of at least 44 by 44 pixels.
- Limit nesting to one or two levels so the structure stays scannable.
The source CSS for this component lives in assets/css/components/sidenav.css.