Spectrum
Menu
Table of contents#
Anatomy#
Options#
Popover container#
For desktop apps, a menu is shown in a popover by default. Mobile apps can show a menu in a popover when appropriate.
Submenus cascade in another popover by default.
Tray container#
For mobile apps, a menu is shown in a tray by default.
Submenus replace the content of the tray.
Label#
A menu item should always have a label that clearly describes the action or option that it represents.
Icon#
A menu item can include an icon, but not purely for decoration. Use an icon only when necessary and when it has a strong association with the label text (e.g., tool switching options in a toolbar).
Description#
Menu items can display additional description text when necessary. Descriptions offer helpful details for clarifying the menu item, such as when introducing new features to users.
Descriptions should be used sparingly and only when necessary.
Value#
A menu item can display a related value in the value area. Examples of values include the selected option from a submenu, a keyboard shortcut for the action, or other content that clarifies the menu item.
Size#
Menus come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Menu sizes should correspond to the size of the menu trigger component (such as an action button). Similarly, any components displayed inside a menu item (such as a switch) must also be of the same size.
Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
Selection#
A menu section has the options of single selection, multiple selection, or having no selection. By default, menu items have no selection, and perform an action on press.
For single selection menu sections, menu items show a single checkmark to indicate the selected item. Multiple selection menu sections display checkboxes beside each menu item.
Selection style#
When the selection option is enabled, the selection can be displayed using either checkboxes or switches. Switches are more commonly used on mobile.
Section headers#
Use a section header when a menu section requires a descriptor. Section headers are helpful when two or more sections differ in their functionality or relationships.
Collapsible#
This option will display submenus in a collapsed, nested format within the parent menu’s container. It can be used for both popover and tray container styles.
When displaying collapsible menu items in a tray, the tray should have a fixed height in order to prevent disorienting behavior when the items are collapsed or expanded.
Unavailable#
An unavailable menu item shows that an option exists, but is not available to the user in a particular scenario. This option can be used to ensure the item’s label is legible and provide context about why the option is unavailable, or directions for how to make it available.
Disabled#
A menu item in a disabled state shows that an option exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later.
Table of options#
From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.
| Property | Values | Default value |
|---|---|---|
| container | popover / tray / none | popover (desktop) / tray (mobile) |
| label | text | – |
| icon | icon / nothing Icon must be present if the label is not defined. | – |
| description | text / nothing | – |
| value | text / nothing | – |
| size | small / medium / large / extra-large | medium |
| selection mode | single / multiple / none | none |
| selection style | checkbox / switch | checkbox |
| section header | text / nothing | – |
| is collapsible | yes / no | no |
| is unavailable | yes / no | no |
| is disabled | yes / no | no |
Composition#
Menu section#
Menu sections contain groupings of related menu items.
Description area#
This optional area can contain a text description, when applicable and relevant to supplement the information of the menu item label.
Behaviors#
Drill-in chevron#
When a menu item contains a submenu, a drill-in chevron will appear at the end of the menu item to show that a submenu is available.
Popover submenus#
When a menu is displayed within popovers, a submenu will appear adjacent to the parent menu item in a separate popover. The submenu popover is aligned with an offset to horizontally overlap the parent menu and vertically align the first submenu item with the parent menu item.
Submenus can optionally be nested in a collapsible format.
Tray submenus#
When a menu is displayed within a tray, a submenu will replace the tray content when the parent menu item is selected. A submenu displays a back button (labeled by the title of the parent item) at the top of the tray to return the user to the previous level of the menu.
Submenus can optionally be nested in a collapsible format.
Keyboard focus#
A menu item can be navigated using a keyboard. The keyboard focus state takes the menu item’s visual hover state and adds a 2 px blue vertical line to the start edge of the menu item.
Text overflow#
When a menu item’s label or description are too long for the available horizontal space, they wrap to form another line.
Section dividers#
Dividers appear between sections when two or more sections are used within the same menu.
Windows high contrast mode#
In Windows high contrast mode, menu items should display with default text color. Selected items should have the background and text colors defined for selected text.
Usage guidelines#
Use consistent sizing#
Menus should be sized according to the component being used as the menu trigger. All submenus within the menu should also be using the same size as the menu trigger.
Use a consistent size between the menu trigger and the menu.
Don’t use different sizes between the menu trigger and the menu.
Content standards#
Use sentence case for menu items#
Following Adobe’s UX writing style, write menu items in sentence case unless they contain words that are branded terms.
Ellipses in menu items#
Avoid using ellipses (…) in menu item names within products whenever possible. An ellipsis often implies that the action for a menu item will open in a new view, or that a user will be taken elsewhere.
Using descriptions in menu items#
Only use descriptions in menu items when the information will help a user to decide which action to take from the menu. Don’t overload menu items with repetitive information or with promotional calls-to-action.
Internationalization#
RTL#
For RTL (right-to-left) languages, the entire menu is mirrored horizontally, including the direction of the drill-in chevron and popover placement for submenus. Workflow icons follow iconography internationalization guidelines.
Keyboard interactions#
Text overflow#
When the action button text is too long for the available horizontal space, it truncates at the end. The full text should be revealed with a tooltip on hover.
| Key | Interaction |
|---|---|
| Enter or Space | When a menu trigger is in focus, displays the menu. When a menu item is in focus, will initiate behavior of the respective item (make selection or perform action). |
| Up Arrow / Down Arrow | Moves focus along the set of options within a single hierarchical level of a menu. |
| Right Arrow / Left Arrow | When displayed in a popover, moves the focus up or down the level of hierarchy to and from the submenu. |
| Esc | Removes focus from within the menu and closes the menu. If focus is within a submenu, focus is moved to the parent menu and the submenu is closed. |
Changelog#
| Date | Number | Notes |
|---|---|---|
| Sep 19, 2022 | 4.0.0 |
|
| Aug 16, 2022 | 3.0.0 |
|
| Sep 17, 2021 | 2.0.0 |
|
| May 28, 2020 | 1.0.1 |
|
| Feb 13, 2020 | 1.0.0 |
|
Design checklist#
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
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).
Accessible use of color
Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).
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).
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).
Content design
UI language and information design considerations have been incorporated into component design.
Defined options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Defined behaviors
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
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 available as design tokens.
UI kit
Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.
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.
In Spectrum for Adobe XD plugin
Component is included in the Spectrum for Adobe XD plugin.
Link