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.
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.
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.
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.
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.
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.
When the navigation item text is too long for the horizontal space available, it wraps to form another line.
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.
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.
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.
Write navigation items in sentence case, to follow Spectrum's UX writing guidelines for capitalization.
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.
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.
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:
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.
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.
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.
|Tab||Moves focus to next item|
|Shift + Tab||Moves focus to previous item|
|Enter or Space||Selects item, expands and collapses item with children|
A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.
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.
|Jun 08, 2022||6.0.1|
|Apr 06, 2022||6.0.0|
|Jul 31, 2019||5.0.1|
|Apr 20, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Works properly across all four color themes (lightest, light, dark, darkest).
Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
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).
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).
UI language and information design considerations have been incorporated into component design.
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
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.
Component is included in the Spectrum for Adobe XD plugin.