Components chevron_right Bottom sheets

Bottom sheets

A bottom sheet is a sheet of material that slides up from the bottom edge of the screen. Bottom sheets are displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content. A bottom sheet can be a temporary modal surface or a persistent structural element of an app.

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

There are two major types of bottom sheets:

  • Modal bottom sheets are alternatives to menus or simple dialogs. They can also present deep-linked content from other apps. They are primarily for mobile.
  • Persistent bottom sheets present in-app content.

Elevation distinguishes modal from persistent bottom sheets. Modal bottom sheets rest at a higher elevation than the app’s content; whereas persistent bottom sheets rest at the same elevation as the app and integrate with its content.

On larger screens, where space is less constrained, using alternative surfaces and components such as simple dialogs and menus may be more appropriate than bottom sheets.

Modal bottom sheets slide in over an app’s content.

Persistent bottom sheets are an integral part of an app’s layout.

Persistent Bottom Sheets Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Persistent bottom sheets display in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content.

Usage

  1. To introduce new content on a unique surface
  2. To display content equal in value to the primary content

Introducing a persistent bottom sheet into a layout with a FAB may cause the FAB to move vertically.

A persistent bottom sheet enables place details to remain on-screen while a map is panned around.

Playback controls remain visible on a persistent bottom sheet regardless of user navigation in the main view.

Mobile

Mobile persistent bottom sheets are full width in both portrait and landscape view.

Tablet/Desktop

Persistent bottom sheets are either full width or inset, as determined by the width of the content they contain, overall UI, underlying content, and stylistic choices.

A full-width persistent bottom sheet on tablet

An inset persistent bottom sheet on tablet

On desktop, a persistent bottom sheet may transform into another surface or sheet of material.

On desktop, content ordinarily presented in a persistent bottom sheet might move onto a new sheet of material. On larger screens it may be more appropriate to display bottom sheet content on a sheet of material positioned on the left side of the interface.

Modal bottom sheets Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app. They appear above other UI elements and must be dismissed in order to interact with the underlying content. When a modal bottom sheet slides into the screen, the rest of the screen dims, giving focus to the bottom sheet.

A modal bottom sheet with a set of actions in a list

A modal bottom sheet with a set of actions in a grid

Usage

Modal bottom sheets may:

  1. Present actions in a list or grid as an alternative to menus or simple dialogs.
  2. Display a contextual menu, when there is no obvious entry point for a menu.
  3. Prioritize the visibility of the elements they contain.

Modal bottom sheets can display long menu item names, menu items with subtext, and icons associated with menu items.

When displaying menu items, fully-expanded modal bottom sheets maintain a minimum 8dp distance from the bottom of the app bar.

Bottom sheet may associate icons with menu items.

Menu items with subtext

Deep linking

Modal bottom sheets may be used to provide deep links to content or controls from another app. These span the full screen width.

A deep-linked modal bottom sheet displays a definition of a term without the user having to open the dictionary app.

The app on the right displays a bottom sheet containing content from the app on the left. This allows the user to view content from another app without leaving their current app.

Bottom sheets may contain links that perform deep navigation within another app. These links may:

  • Allow the user to travel multiple levels deep within another app
  • Return to the level on which they started

However, these deep links may not allow the user to navigate upward in the hierarchy: they may only stay at the initial level, go deeper, or travel back to the initial level.

Alternatively, deep links may navigate the user away from the bottom sheet entirely, into another view.

To enable upward navigation from the bottom sheet’s deep links, offer an explicit link to open the application via an overflow menu. Actions within the deep-linked bottom sheet may result in opening the parent application, such as with an “add contact” action.

Do.

Fully-expanded modal bottom sheets provide an X in the app bar.

Don't.

When navigating downwards into the content hierarchy, it would be appropriate to show an Up arrow.

Mobile

Modal bottom sheets are primarily a mobile component, where they span full screen width in both portrait and landscape views.

Do.

For modal bottom sheets, don’t initially overlap the app bar. Allow the user to tap/swipe to dismiss.

Don't.

The height of the bottom sheet should be dictated by the amount of content it contains.

Do.

When displaying a long list, modal bottom sheets can scroll internally and expand past the 16:9 keyline.

Don't.

For modal bottom sheets, don’t initially overlap the app bar. Retain an area for the user to tap outside the bottom sheet to dismiss it.

Tablet/Desktop

Consider alternatives to modal bottom sheets on larger screens. Because bottom sheets may appear far from the place where the user clicked or touched to summon them, it splits the user’s attention across two different parts of the screen.

Because desktop space is less constrained, it can support several alternatives to modal bottom sheets.

Bottom sheet alternative

Benefit

Menu

Keeps action choices close to the point of interaction

Simple dialogs

Strongly interrupts the user’s current context

Inline expansion within the same view

Is not as interruptive as a menu or dialog

Showing all options as a persistently accessible element

Does not require a button press to access them

Opening a new browser window

Flexible sizing and layout independence

Menus keep the choice of actions close to the point of interaction. Placing these menu options into a bottom sheet would not be recommended.

Make modal bottom sheets on large screens use appropriate layouts for the amount of extra space.

A grid list bottom sheet on tablet

A long list bottom sheet on tablet

Behavior Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Bottom sheets can be dismissed by swiping the bottom sheet down, by touching an explicit control such as an X in the app bar, or by touching the system back button (Android).

Modal bottom sheets can also be dismissed by touching outside of the bottom sheet.

Dismiss by swiping the bottom sheet down

Dismiss by touching outside of the bottom sheet surface

Dismiss by touching the “X” dismiss action (if there is an app bar)

Specs Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The following specs are provided for mobile apps.

Font and color

  • Text: Roboto Regular 16sp,  #000 87%
  • Title (optional): Roboto Regular 16sp, #000 54%
  • Default bottom sheet background fill: #FFF
  • Transparent overlay fill: #000 20%

List-style bottom sheet

Screen edge left & right margins: 16dp
Top and bottom margins: 8dp
List-item height: 48dp
List icons: 24x24dp, middle vertical alignment
Text associated with icon: 32dp horizontal padding

Redline for list-style bottom sheet in a mobile app.

List-style bottom sheet in a mobile app

List-style sheet with header

Screen edge left & right margins: 16dp
Space below the top list: 7dp
Divider line: 1dp
Space above second bottom sheet: 8dp
List-item height: 48dp
List icons: 24x24dp, middle vertical alignment
Text associated with icon: 32dp horizontal padding
List title height: 56dp

Redline for list-style sheet with header

List-style sheet with header

Grid-style bottom sheet with icons

Screen edge left & right margins: 24dp
Vertical space between grid lists: 16dp
Grids list icons: 48x48dp, middle vertical alignment, equally distributed across the grid
Grid list text area: 16dp tall, center-aligned below each icon
Padding below grid: 24dp

Redline for grid-style bottom sheet that contains a standard set of actions for other apps

Grid-style bottom sheet that contains a standard set of actions for other apps

Bottom sheets slide up from the bottom of the screen and initially cover a portion of the screen.

The initial height of a bottom sheet is relative to the height of the list items (or grid rows) it contains. A bottom sheet should not initially have a height beyond its 16:9 ratio keyline, depending on how much content it contains. Bottom sheets may be swiped up to fill the height of the screen, with content that then scrolls internally.

The initial height of a bottom sheet should not extend beyond the 16:9 ratio keyline.

The minimum height of a bottom sheet is relative to the height of the list items it contains.

Specs for desktop and tablet apps

Modal and Inset persistent bottom sheets on desktop and tablet use these minimum and maximum widths.

The width of a bottom sheet is determined by the structure of the overall interface, which is typically based on increments. On a page grid, the maximum width of the bottom sheet is relative to the page grid and content it rests on.

For example, on a 960dp wide screen, if you use the height of the app bar (64dp) as your increment, it would result in fifteen total increments wide. A minimum of one increment should separate your bottom sheet from the screen edge, and the bottom sheet itself should be at least six increments wide.

Screen width

Minimum distance from screen edge (in increments)

Minimum sheet width (in increments)

960dp

1 increment

6 increments

1280dp

2 increments

8 increments

1440dp

3 increments

9 increments

Breakpoints for various desktop screen sizes