Sidebar
Sidebar (or vertical menu) is used to display links that allow the user to navigate across a system.
Usage
It is a list of links that allow the user to navigate to another page or to a specific part of the actual page.
When to use
Use it when you need to display a navigational hierarchy with one to three levels.
Anatomy
Main level: The first level of links. If they have sub links, you must indicate it with an arrow
Second level: On click, a new list of links is displayed.
Placement
Place the menu on the left of the screen.
Do’s & Don’ts
Avoid using a vertical and horizontal menu in the same page
If you need to hide the menu, use a burger menu component.
Users should be able to tab through each link.