Skip to content


  • Stable
  • Not reviewed for accessibility

The Side Nav is a vertical list of navigational links, typically used on the left side of a page. For maximum flexibility, Side Nav elements have no default width or positioning. We suggest using column grid classes or an inline width style for sizing, and flexbox utilities for positioning alongside content.

  • You can use a border if the parent element doesn't have it already.
  • Add aria-current="page" to show a link as selected. Selected button elements in tab-like UIs should instead have aria-selected="true".

Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.

The .SideNav-subItem is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.

Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.

Edit this page on GitHub
1 contributorsimurai
Last edited by simurai on December 16, 2022