Adobe Logo

Spectrum

Version 5.0.1

Trays

Trays are used to display transient content (menus, options, additional actions, etc.) They only exist on mobile applications and are used for exposing types of content that may be too overwhelming for popovers.

Table of contents#

Placement#

Portrait#

In portrait orientation, a tray is displayed at the bottom of the screen and takes up the full-width.

Key example showing the portrait tray placement. A tray is placed in the bottom of a mobile device.

Landscape#

In landscape orientation, a tray is displayed at the bottom of the screen, but keeps its portrait width. It is centered horizontally and has rounded upper corners.

Key example showing the landscape tray placement. A tray is placed in the bottom of the mobile device in landscape orientation.

Size#

Flexible height#

A tray’s height is flexible: its height should accommodate for the amount of content inside.

Key example showing the flexible height for tray placement. A tray in the bottom of a mobile device is displaying four items. All items are visible.

#

Key example showing the flexible height for tray placement. A tray in the bottom of a mobile device is displaying four action items, two toggles and one thumbnail image. All items are visible.

#

Maximum height#

The maximum height of a tray is determined by a 64 px safe zone from the top of the screen in both portrait and landscape orientations. This guarantees that there is always space for tapping outside the tray. It also helps to visually differentiate a tray and a new page.

Key example showing the maximum height for tray placement. On a device held in portrait a tray starting in the bottom of a mobile device has a 64 pixel gap space between the top area of the screen.

#

Key example showing the maximum height for tray placement. On a device held in landscape a tray starting in the bottom of a mobile device has a 64 pixel gap space between the top area of the screen.

#

Tray content#

Content types#

A tray can contain menu items, as well as other types of components (e.g., list, thumbnail, etc.) to display additional options and information.

Key example showing menu items in a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays the menu items "Copy link", "Share", "Edit" and "Delete".

#

Key example showing mixed items in a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays the menu items "Edit" and "Delete", the toggle for "Available offline" and a thumbnail image.

#

Padding#

Trays have a top and bottom padding of 5 px in both portrait and landscape orientations. However, when there is a fixed header, the top padding starts below the fixed header.

Key example showing padding on a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays the menu items "Copy link", "Share", "Edit" and "Delete". A 5 px padding is added on the top and bottom of the tray.

#

Key example showing padding on a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays font names as menu items. The fixed header "Font" is placed on top of the list. A 5 px padding is between the fixed header and the menu items.

#

Nested content#

When navigating to nested content within a tray, the entire tray content is replaced by the nested content sliding in from the right side of the screen. Remember to include a header with a back arrow to allow users to navigate back.

Key example showing nested content in a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays the menu items "Language", "Location" and "About." An arrow pointing right on the right side of the items indicates a menu.

#

Key example showing nested content in a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays the items "English (UK)", "English (US)", "Japanese" and "Spanish." A checkmark on the second item indicates a selection. A header item with the text "Language" and a left pointing arrow placed on the left side indicates a menu.

#

Behaviors#

Key example showing the source indicator behavior of a tray. On a device held in landscape a tray starting in the bottom of a mobile device displays four items. The button triggering the tray is in down / selected state. An overlay is added on the rest of the screen, emphasising the tray.

Source indication#

Similar to popovers, whenever a tray is opened, the source should take its down/selected state to indicate the connection between the tray and its source.

Key example showing the source animation behavior of a tray. On a device held in landscape a tray starting in the bottom of a mobile device is animating and out. A fade and move-in effect animating at the same time in front of an in-fading overlay.

Animation#

When displaying a tray, it should fade in and animate up from the bottom of the screen. The background overlay fades in at the same time.

Dismissing a tray#

A tray can be dismissed by clicking/tapping anywhere outside of the tray, swiping down on the screen, or selecting an option/taking an action inside the tray. On Android, it can also be dismissed with the back button. When the tray content is scrollable, a swipe-down gesture should only dismiss the tray if the content in scrolled to the top.

Usage guidelines#

Trays or popovers?#

Trays can be used as alternatives to popovers on small screens. Trays should be used when exposing a volume of content that is too overwhelming for popovers.

Key example a tray showing six options with icons; share with, copy link, move, favorite, edit, and delete.

Changelog#

DateNumberNotes
Apr 21, 20205.0.1
  • Updated background color to gray-100 on dark and darkest themes
Apr 20, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)