Side navigation

Version 6.0.1

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.

Image illustrating the single level side navigation component on a desktop browser. All navigation items arranged vertically. They are home, apps, header storage, document cloud, creative cloud, header shared, send&track and reviews. The first navigation item home is on selected state.Image illustrating the single level side navigation component on a desktop browser. All navigation items arranged vertically. They are home, apps, header storage, document cloud, creative cloud, header shared, send&track and reviews. The first navigation item home is on selected state.
DateVersionSpectrumExpress UI KitJun 08, 20226.0.1DownloadDownloadApr 06, 20226.0.0DownloadDownloadJul 31, 20195.0.1DownloadApr 20, 20195.0.0Download

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 first one is a single level side navigation with headers and the second 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 for 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 and track, reviews and signatures.

Single level with headers#

Use a single level with headers side navigation when needing to group navigation items into categories. This variant has the same behavior as the single level side navigation, but it has headers that aren’t interactive. If items don’t fall into a category, 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 there are 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).

Use icons only when absolutely necessary: when they add essential value and have a strong association with the text. Never use icons 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, so choose a width that works with the navigation items in your experience. The default width is size-3000.

Make the width generous enough so that it doesn’t feel too condensed. Doing this will ensure that users won't confuse the side navigation with buttons or other controls.

Key example of long text navigation item, in German. 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.

dont
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 communicate the places where they'll go. Arbitrary or non-useful titles cause usability issues.

do
Key example of using descriptive title for side navigation items.
dont
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.

do
Key example of using concise title for navigation items. Navigation items from up to down are guidelines, styles, color, grid, typography, components, patterns.
dont
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#

Write navigation items in sentence case, to follow Spectrum's UX writing guidelines for capitalization.

do
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.
dont
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.

do
Key example of showing correctly usage of icon in a multi-level side navigation component. Only first-level navigation item can has icon.
dont
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.

do
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.
dont
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.

Using the right option#

Make sure to use the right option for the context and user needs. Don’t mix behavior, styles, or variations together in a single navigation menu. Follow these guidelines:

do
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.
dont
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 deeply nested menus#

The multi-level side navigation goes to three levels deep. Adding more than three levels will make the indentation indiscernible, which becomes a major usability issue.

dont
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#

KeyInteractionTabMoves focus to next itemShift + TabMoves focus to previous itemEnter or SpaceSelects item, expands and collapses item with children

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of a side navigation component in the Spectrum for Adobe Express theme. Single level side navigation component with icons and text labels for 4 items: Projected, Apps, Settings, Support.

Spectrum for Adobe Express#

Side navigation in Spectrum for Adobe Express has more rounding for each navigation item (this appears on hover and down states). This theme also uses a different icon set.

Changelog#

DateNumberNotesJun 08, 20226.0.1
  • Replaced uppercase detail typography style with heading style in headers
Apr 06, 20226.0.0
  • Updated all colors to 6.0.0
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#

check

All interactive states

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

check

All color themes

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

check

All platform scales

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

unchecked

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

unchecked

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

N/A

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

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

check

Defined behaviors

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

check

Usage guidelines

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

check

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

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

check

Keyboard interactions

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

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

check

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

check

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.