Side Navigation

Selector
nav[data-orientation="horizontal"]

In the navigation hierarchy of Mango UI, the side navigation is secondary. Depending on the exact site, using the side navigation keeps the user in scope of the current navigation item in the header. In Mango UI's selectors, the side navigation is distinguished by adding data-orientation="horizontal" to the nav. This is purely for technical purposes and doesn't offer a semantic difference. However, you should distinguish between the two by providing labels with aria-labelledby or aria-label.

To nest items in the side navigation, include a ul within an li. Any links in the child ul will be indented slightly and have a slightly smaller font size. Additionally, use aria-current="page" on the current link to provide it with selected styles.

Stylophone

This groovy instrument burst into the scene in the late 60s, selling 4 million units...

The navigation used on this page is also an example of a side navigation. Remember that the side navigation isn't intended to be placed on backgrounds with a surface color (cards).