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 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.
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.
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.
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.
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.
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 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.
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.
Navigation items should be written in sentence case.
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 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:
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.
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|
|Jul 31, 2019||5.0.1|
|Apr 19, 2019||5.0.0|
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
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).
Includes guidelines for layout (wrapping, truncation, overflow), animation, interactions, etc.
Includes a list of dos and don’ts that highlight best practices and common mistakes.
Follows WCAG 2.0 standards for contrast (AA).
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.
Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.
All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.