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).