Side Navigation

Side navigation is a hierarchical, vertical navigation component featured on the right or left side of a page or screen.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In backlogElement is in backlog
React
React
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Documentation
PublishedElement can be used in production

Overview

The Dell Design System’s new side navigation component is both scalable and configurable. This component works well for web-based productivity applications, including product lines that may need persistent navigation to guide users through the experience. In this iteration, additional secondary and tertiary levels have been added to make the navigation component more versatile.

Anatomy

The side navigation component is made up of links, icons, chevrons, and primary, secondary, and tertiary levels, along with a slide out panel.

  1. Navigation in the collapsible view, showing primary page-level icons only.
  2. Navigation in its expanded state, showing text with icon on primary levels.
  3. Primary group in side navigation with secondary and tertiary navigation underneath.
  4. Secondary pages under a primary group.
  5. Secondary group with chevron indicating tertiary levels.
  6. Tertiary page navigation under a secondary group.
  7. Chevrons to collapse and expand navigation in the collapsible view. Chevrons do not appear in fixed view.

Articles

Vertical navigation article

Read the Nielsen Norman Group's article on side navigation.

Information architecture articles

Review the NN/g's information architecture videos and articles.

Icon recognition

Review NN/g's recommendations on how to test icon usability.

Accot-Zhai Steering Law in UI

Read the Nielsen Norman Group's article.

Vertical navigation video

Read the Nielsen Norman Group's video on side navigation.

Is Navigation Useful?

Read the Nielsen Norman Group's article on navigation.

Audience-Based Website Navigation

Read the Nielsen Norman Group's article on navigation.

Information Architecture and navigation

Read the Nielsen Norman Group's article on IA and navigation.