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.

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.

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.

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.

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.

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.

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)