Skip to main content Skip to navigation Skip to search

Sidenav

The sidenav is a left-aligned navigational component.

Usage

When there are many navigation links a side navigation provides overflow and scrolling to the list of links. Users are informed when a navigation item is active.

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. Scroll when the content exceeds the viewport.

Code & Examples

Structure

Clarity application layout depends on a specific DOM structure for layout to work properly. SIde nav fits into this and has a specific place in the DOM hierarchy. A Sidenav container is a sibling element of the content area.

Navigation groups provide a way to group similar or related links together. When grouping links, do not make the heading a link.

Header
...

Icons

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