Side navigation
Side navigation lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation.

DESIGN

Single level navigation
  • Use a single level side navigation when you have a simple or flat navigation, without a hierarchy.
  • Navigation items should be written in sentence case.
Multi-level navigation
  • Use a multi-level side navigation when you have multiple layers of hierarchical navigation.
  • Clicking on a header opens or collapses the sub-level navigation items, and in some cases also sends the user to the top-level location.
  • Navigation items should be written in sentence case.
Side Navigation with icons
Multi-level side navigation with icons
Side Navigation with icons
  • Display 3-7 navigation items.
  • Each navigation items is represented by an icon and a text label.
  • Navigation items should be written in sentence case.
  • Icons should only be use when absolutely necessary when they add essential value and have strong association with the text, not just as decoration.
  • In multi-level side navigation, only the first-level items can have icons. Any sub-level items should always be text-only to ensure clear hierarchy.
Ooops!
Generic Popup