Side Navigation

Side navigation is a vertical navigation component featured on the left-hand side of a web page. Optional dropdowns enable navigation between primary and secondary levels.

Overview

Use side navigation on information-heavy websites to expose many lower-level subpages or for websites where navigation is likely to grow. The vertical layout makes it easier for users to scan long lists of items.

Unlike horizontal navigation, side navigation has no item limit.

Careers

Dos and Don’ts

Side Nav Do Example
Do
  • Do use short, clear labels that describe the page content.
  • Do place more important items at the top of the component, as users are more likely to notice and remember items at the beginning of a list.
Side Nav Don't Example
Don't
  • Don’t use lengthy or inconsistent labels. When possible, avoid using labels that wrap. Choose short noun or verb phrases that clearly describe the page content.
  • Don’t use side navigation on pages with large data tables, as this may cause horizontal scrolling within the table. Instead, use other navigation components, such as breadcrumbs, horizontal navigation, and tabs to organize and conserve content space.

Installation

Props