Navigation List
The List, ListItem, and its variants are used to display a list of items in a structured way. They are often used for primary and secondary navigation of content, such as menus, sidebars, and other navigational elements.
Demo
Variants
Primary
For the purpose of separation, your primary menu or document structure should be marked as primary. Without a secondary menu this serves as stylistic only as it'll set the side menu to use the accent colours of your theme, with a secondary menu however it creates a clear visual distinction between the two.
The left and right hand side menus on this website act as an example, with the left (primary) being documentation sections and the right (secondary) being the navigation of the current page.
Secondary
When you've got more than one list (or you like lined navigation) you can defer to secondary.
In this example we've also added the <SideNavContent variant="lined">
prop for the line down the side, and added a forced white background so it's visible against the code demo.