The sidenav is a left-aligned navigational component.

Clarity’s sidenav is placed inside the .main-container class and appears after the .content-area.

.sidenav-content

This is a wrapper intended to contain one or more .nav-group groups.

A .nav-group consists of a checkbox and label followed by a .nav-list. The order of the markup is important to achieve the collpasible effect on the nav-groups.

.collapsible

A .nav-group inside a sidenav becomes collapsible by adding a .collapsible class.

A .nav-list is a list of navigation links. Each navigation link extends the .nav-link class. An active .nav-link is assigned the .active class.

Usage

The sidenav is a familiar navigation pattern for users. The sidenav can fit as many navigation links as needed, scrolling when the content exceeds the viewport. Use the sidenav:

  • For links secondary to the links in the header or subnav
  • For a navigation schema with a deep hierarchy
  • When the header and subnav cannot accommodate the required links

The sidenav works best in desktop applications.

If you group link names under a heading, don’t make the heading a link.

Using Icons

Include icons when you want to provide a more appealing visual look than just text.