A vertical list of links for site navigation typically placed next to the body content.
- View changes
- npm i @gold.au/side-nav
The side navigation allows users to find other pages which share a similar topic or section. By default it supports three levels of nesting along with an accompanying heading.
On mobile and smaller viewports, the side navigation uses functionality from the accordion component to collapse down to an expandable element.
Only expand active subsections to help emphasise which section the user is in and to reduce visual complexity.
Keep the navigation link text short. They can be shorter versions of pages titles.
If the side navigation is too long, users may miss items at the bottom. If there are too many levels, users may miss items that require too many clicks. Conduct usability testing to find the right balance between breadth and depth.
Consider Web Content Accessibility Guidelines 2.1 Success Criterion 3.2.3 Consistent Navigation.