Version 5.0.1

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.

Anatomy#


Image illustrating the anatomy for two variants of side navigation component. The left one is a single level side navigation with headers and the right one is a multi-level side navigation.

Image illustrating the anatomy for two variants of side navigation component. The left one is a single level side navigation with headers and the right one is a multi-level side navigation.

Options#


Key example of single level side navigation component. Four navigation items are projects with selected state, recents, libraries and shared.

Single level#

Use a single level side navigation when you have a simple or flat navigation, without a hierarchy. Choosing a navigation item will select the item and take the user to the corresponding location.

Key example of single level with headers side navigation component. Nine navigation items are home with selected state, apps, header storage, document cloud, creative cloud, header shared, send&track, reviews and signatures.

Single level with headers#

Use a single level with headers side navigation when you need to group navigation items into categories. This variant has the same behavior as the single-level side navigation, except that it has headers that aren’t interactive. If some items don’t fall into one of the existing categories, place them at the top.

Key example of multi-level side navigation component. First-level navigation items are guidelines, styles, components and patterns. Sub-level navigation items are color, grid, layout and responsive grid.

Multi-level#

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.

Key example of single-level side navigation component. Navigation items are home, apps, creative cloud, document cloud, dropbox, google drive and Microsoft OneDrive. Each item has corresponding icon on its left.

Icons#

Icons can be displayed in first-level items of any type of side navigation (single level or multi-level). Icons should only be used when absolutely necessary; when they add essential value and have a strong association with the text, not just as decoration.

Behaviors#


Two key examples of side navigation component for flexible width property. The first side navigation component has wider width than the second one.

Flexible width#

The width of the side navigation is flexible; choose a width that works with the navigation items you have. Make the width generous enough so that it doesn’t feel too condensed, and this will ensure that it doesn’t get confused with buttons or other controls. The default width for side navigation is size-3000.

Key example of long text navigation item. The text should wrap to form another line.

Text overflow#

When the navigation item text is too long for the horizontal space available, it wraps to form another line.

Usage guidelines#


Don't make the width too condensed#

Make sure the width is generous enough so that it doesn’t feel too condensed. This ensures it doesn’t get confused with buttons or other controls.

Key example showing the incorrect width setting for side navigation component.

Use descriptive titles#

Navigation should be helpful. Choose titles for navigation items that clearly represent the surfaces where they'll go. Avoid using titles that are arbitrary or un-useful, since this can pose usability issues for your product.

Key example of using descriptive title for side navigation items.
Key example of using incorrectly title for side navigation items.

Be concise#

Along with being descriptive, navigation items should be succinct. Reduce any unnecessary words in order to ensure simplicity. Navigation items should never be so long that they require truncation, except in instances where navigation is user-generated.

Key example of using concise title for navigation items. Navigation items from up to down are guidelines, styles, color, grid, typography, components, patterns.
Key example of using discursive title for navigation items. Navigation items from up to down are spectrum guidelines, spectrum styles, color system, grid system, typography system, spectrum components, spectrum patterns.

Use sentence case#

Navigation items should be written in sentence case.

Key example of correctly using sentence case for the title of navigation items. Navigation items are header SHARED, Files, Folders and Design specs. Only initial letter of each title are capitalized.
Key example of incorrectly using sentence case for the title of navigation items. Navigation items are header SHARED, FILES, Folders and Design specs.

Use icons in first-level items only#

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. In cases where the navigation content might be user-generated, stick to text-only navigation items.

Key example of showing correctly usage of icon in a multi-level side navigation component. Only first-level navigation item can has icon.
Key example of showing incorrectly usage of icon in a multi-level side navigation component. Both first-level and second-level navigation items all have icons.

Combining icon and text-only navigation items#

Icon and text-only navigation items can be used in combination. However, do not alternate the two to keep a clear hierarchy. When using the header variation, an entire category should either all have icons or all be text-only.

Key example of showing correct usage for combining icon and text-only navigation items. All sub-level navigation items under the same header are either all have icons or all be text-only.
Key example of showing incorrect usage for combining icon and text-only navigation items. Under the last header SHARED, send&track and reviews are text-only but signature has icon.

Use the right variation#

Make sure that you are using the right variation for your products’ context and users’ needs. Don’t mix behavior, styles, or variations together in a single navigation menu:

  • When navigation is simple, use the single-level side navigation.
  • When navigation is simple but categorical, use the single-level side navigation with headers.
  • When navigation is expansive, hierarchical, and/or you need progressive disclosure in your menu behavior, use the multi-level side navigation.
Key example of choosing correct side navigation variation. Navigation items and headers are home, apps, header storage, document cloud, creative cloud, header shared, send&track and reviews.
Key example of choosing incorrect side navigation variation. Navigation items are home, apps, storage, sub-level item document cloud, sub-level item creative cloud, shared, send&track and reviews.

Avoid deep nested menus#

The multi-level side navigation should only go 3 levels deep. More than 3 levels will make the indentation indiscernible, which can become a major usability issue in your product.

Key example of showing incorrectly using deep nested menus. There're four levels nested side navigation in this image.

Use consistent multi-level behavior#

If top-level navigation items have a location associated with them, send the user to that location and open the sub-level navigation items. If a top-level navigation item does not have any associated location, only open the sub-level navigation items.

Side navigation can use either of these behaviors, but should never mix behaviors in the same experience.

Internationalization#


Key example of show side navigation component in right to left language context.

RTL#

For RTL (right-to-left) languages, the layout of the side navigation is mirrored. Navigation items are left-aligned and their icons are placed on the right side of the text.

Keyboard interactions#


KeyInteraction
TabMoves focus to next item
Shift + TabMoves focus to previous item
Enter or SpaceSelects item, expands and collapses item with children

Changelog#


DateNumberNotes
Jul 31, 20195.0.1
  • Updated navigation item text to use sentence case
Apr 20, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#


All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

Multiple options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

Defined behaviors

Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.

Usage guidelines

Includes a list of dos and don’ts that highlight best practices and common mistakes.

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.

Generated UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.