Menu

Version 4.0.0

Menus help users take actions, choose from a list of options, configure settings, and more. They can be placed in a transient container, like a popover or tray.

Example of a menu. An action button, label Settings with a gear icon, is selected as the menu trigger. It shows an account menu with an avatar, name Lisa Wilson, and Admin label, and three menu items, labels Language, Notifications, Badges. Language shows a submenu with 7 languages, with U.S. English as the selected option. Notifications menu item includes a switch in the on state. Badges menu item includes a switch in the off state.Example of a menu. An action button, label Settings with a gear icon, is selected as the menu trigger. It shows an account menu with an avatar, name Lisa Wilson, and Admin label, and three menu items, labels Language, Notifications, Badges. Language shows a submenu with 7 languages, with U.S. English as the selected option. Notifications menu item includes a switch in the on state. Badges menu item includes a switch in the off state.
DateVersionSpectrumSep 19, 20224.0.0DownloadAug 16, 20223.0.0DownloadSep 17, 20212.0.0DownloadMay 28, 20201.0.1DownloadFeb 13, 20201.0.0Download

Anatomy#

Diagram showing the component parts of a menu. Includes the menu trigger, menu, menu section header, menu section, menu section divider, menu item, and submenu.

Options#

Example of a menu in a popover container. 3 menu items, labels Cut, Copy, Paste.

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.

Example of a menu in a tray container. 3 menu items, labels Cut, Copy, Paste.

Tray container#

For mobile apps, a menu is shown in a tray by default.

Submenus replace the content of the tray.

Example of a menu with 3 menu items, labels Cut, Copy, Paste.

Label#

A menu item should always have a label that clearly describes the action or option that it represents.

Example of a menu with 3 menu items, with both icons and labels. First item, label Cut, with scissors icon. Second item, Copy, with duplicate icon, Third item, Paste, with paste icon.

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).

Example of a menu with 3 menu items, with both labels and descriptions. First item, label Quick export, description Share a low-res snapshot. Second item, label Open a copy, description Open in Illustrator for iPad. Third item, label Share link, description Let others download or comment.

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.

Example of a menu with 3 menu items, with both labels and values as keyboard shortcuts. First item, label Cut, keyboard shortcut Command + X. Second item, label Copy, keyboard shortcut Command + C. Third item, label Paste, shortcut Command + V.

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.

Examples of menus with 3 generically labeled menu items in 4 sizes, small, medium, large, and extra-large.

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.

3 examples of menu sections with 3 different kinds of selection options. First option is the default, no selection. Menu with 3 items, labels Cut, Copy, Paste. 2nd option, single selection. Menu with 3 items, labels Marquee, Add, Subtract, with a single checkmark next to selected item, Marquee. 3rd option, multiple selection. Menu with 3 items, labels Guides, Grid, Rulers. 2 selected items, Guides and Rulers.

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.

2 examples of menu sections with 2 different kinds of selection styles. First option uses checkboxes to show selection. Menu with 3 items, labels Guides, Grid, Rulers. 2 selected items, Guides and Rulers. 2nd option uses switches to show selection. Menu with 3 items, labels Guides, Grid, Rulers. 2 selected items, Guides and Rulers.

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.

Example of a menu with 2 section headers. First section header, label Tools. 3 menu items with icons, labels Marquee, Add, Subtract. Second section header, label Actions. 1 menu item, label Deselect.

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.

Example of a collapsible menu. 2 sections, labels Source Code Pro and Source Sans Pro. Source Code Pro is in the collapsed state. Source Sans Pro is not collapsed, showing 3 options, labels Light, Regular, Bold.

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.

Example of a menu with an item that is unavailable. 3 menu items, labels Edit, Delete, Share. Delete option is unavailable and includes an info icon on with a popover, title Permission required, description Your admin must grant you permission before you can delete a segment.

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.

Example of a menu with an item in the disables state. 3 menu items, labels Cut, Copy, Paste. Paste option is disabled.

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.

PropertyValuesDefault Valuecontainerpopover / tray / nonepopover (desktop) / tray (mobile)labeltext–iconicon / nothing
Icon must be present if the label is not defined.
–descriptiontext / nothing–valuetext / nothing–sizesmall / medium / large / extra-largemediumselection modesingle / multiple / nonenoneselection stylecheckbox / switchcheckboxsection headertext / nothing–is collapsibleyes / nonois unavailableyes / nonois disabledyes / nono

Composition#

Diagram showing the composition of a menu section. 2 menu items with generic labels are grouped together into a menu section.

Menu section#

Menu sections contain groupings of related menu items.

Diagram showing the composition of the label area for a menu item. A generic label reading Menu item label consists of the label area.

Label area#

The label area contains the text label and icon of the menu item.

Diagram showing the composition of the optional description area for a menu item. The description area with a description of the menu item directly follows the menu item’s label.

Description area#

This optional area can contain a text description, when applicable and relevant to supplement the information of the menu item label.

Diagram showing the composition of the optional value area for a menu item. The value area appears in-line and at the end of the menu item. This example shows a menu with 3 items, each with a value as a text string.

Value area#

This optional area is reserved for displaying a value related to the menu item.

Behaviors#

Example showing drill-in chevron behavior on a menu item that contains a submenu. If a menu item contains a submenu, a chevron icon will appear at the end of the menu item.

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.

Example showing popover submenu behavior. A menu with 3 items, labels Lock guides, Snap to, Show grid. Snap to menu item includes a drill-in chevron to show its submenu, a multiple selection menu with 3 items, labels Guides, Grid, Rulers. Guides and Grid are selected.

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.

Example showing tray submenu behavior. A menu option labeled Snap to has 3 items in its submenu with multiple selection, labels Guides, Grid, Rulers. Guides and Rulers are selected.

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.

Example of a menu with keyboard focus behavior. 3 menu items, labels Cut, Copy, Paste. Paste is in keyboard focus.

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.

Example showing text overflow behavior in menu item labels. A menu has 3 items. First item label, Small (works best for mobile phones). Second item label, Medium (all purpose). Third item label, Large (works best for printing). The first and third labels wrap to two lines because of their long length.

Text overflow#

When a menu item’s label or description are too long for the available horizontal space, they wrap to form another line.

Example showing section divider behavior. A menu has 2 sections. First section has 3 menu items. A divider appears next, showing the second section including 2 menu items.

Section dividers#

Dividers appear between sections when two or more sections are used within the same menu.

3 examples of menu sections with 3 different kinds of selection options, all in Windows high contrast mode. First option is the default, no selection. Menu with 3 items, labels Menu item, Menu item, Disabled menu item. 2nd option, single selection. Menu with 3 items, labels Menu item, Selected menu item, Disabled menu item, with a single checkmark next to selected item, label Selected menu item. 3rd option, multiple selection. Menu with 3 items, labels Menu item, Selected menu item, Disabled menu item. 1 selected item, label Selected menu item.

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.

do
​​Key example showing correct usage of consistent sizing between a menu trigger and a menu. Action button with label Export and export icon shows a menu with 3 options, labels Quick export, Open a copy, Share link. The action button and the menu are the same size.

Use a consistent size between the menu trigger and the menu.

dont
​​Key example showing incorrect usage of sizing between a menu trigger and a menu. Action button with label Export and export icon shows a menu with 3 options, labels Quick export, Open a copy, Share link. The action button is significantly larger than 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.

do
Key example of how to correctly format labels for menu items. A menu with 3 menu items, labels Quick export, Open a copy, Share link. All labels use sentence case, where only the first letter is capitalized: Q in Quick export, O in Open a copy, S in Share link.
dont
Key example of incorrect ways to format labels for menu items. A menu with 3 menu items, labels Quick Export, Open A Copy, SHARE LINK. First label uses title case, where both the Q and the E are capitalized in Quick Export. Second example uses title case, where the O, A, and C are capitalized in Open A Copy. Third example uses all-caps, where all letters are capitalized in SHARE LINK.

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.

do
Key example showing the best practice of avoiding using ellipses in the labels of menu items. A menu has 3 menu items, labels Quick export, Open a copy, Share link.
dont
Key example showing a behavior to avoid when writing labels for menu items. A menu has 3 menu items, labels Quick export…, Open a copy…, Share link… . All 3 items include an ellipsis at the end of the label.

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.

do
Key example showing how to correctly use descriptions with menu items. A menu has 3 menu items, each with a description. First item, label Quick export, description Share a low-res snapshot. Second item, label Open a copy, description Open in Illustrator for iPad. Third example, label Share link, description Let others download or comment.
dont
Key example showing incorrect usages of descriptions with menu items. A menu has 3 menu items, each with a description. First item, label Quick export, description Quickly export your file. Second item, label Open a copy, description View a carbon copy of your work. Third example, label Share link, description Share this with everyone on your team!

Internationalization#

Example of a menu with 4 menu items with icons, with an open submenu on the 4th item, in Arabic. The direction of the drill-in chevron and the popover placement for the submenu is mirrored horizontally.

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#

Key example of an action button with a very long label Präferenzen verwalten (German for manage preferences) being truncated at the end when the button container is not wide enough for the label, while still displaying the full label in a tooltip on mouse hover.

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.

KeyInteractionEnter or SpaceWhen 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 ArrowMoves focus along the set of options within a single hierarchical level of a menu.Right Arrow / Left ArrowWhen displayed in a popover, moves the focus up or down the level of hierarchy to and from the submenu.EscRemoves 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#

DateNumberNotesSep 19, 20224.0.0
  • Added selection style (checkbox or switch)
  • Removed actions area
Aug 16, 20223.0.0
  • Updated all colors to 6.0.0
  • Removed uppercase detail typography style from section headers
  • Added unavailable option
  • Added collapsible header option
  • Added more documentation (composition, behaviors, and guidelines)
Sep 17, 20212.0.0
  • Rename "list item" to "menu"
  • Moved checkmark placement to left of menu items
May 28, 20201.0.1
  • Changed alignment of icons, keyboard shortcuts, and selection controls from middle to top
Feb 13, 20201.0.0
  • This component has been added to the website

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).

check

Accessible use of color

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

check

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).

check

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.

unchecked

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.

unchecked

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.