components icon

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
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
ExperimentalElement offered for testing and feedback. Not intended for use in production.
Angular
Angular
In backlogElement is in backlog
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.
  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 Nielsen Norman Group's information architecture videos and articles

Icon usability testing

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