Modal bottom sheets are primarily for mobile and can also present deep-linked content from other apps.
Persistent bottom sheets integrate with the app to display supporting content.
Bottom sheets are displayed only as a result of a user-initiated action.
Modal bottom sheets: Higher than the app
Persistent bottom sheets: Same elevation as the app
There are two major types of bottom sheets:
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 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.
Introducing a persistent bottom sheet into a layout with a floating action button (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 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
Modal bottom sheets may:
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.
The bottom sheet may associate icons with menu items.
Menu items with subtext
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:
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.
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.
Do.
When displaying a long list, modal bottom sheets can scroll internally and expand past the 16:9 keyline.
Don’t.
The height of the bottom sheet should be dictated by the amount of content it contains.
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.
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
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)
The following specs are provided for mobile apps.
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
Keylines for list-style bottom sheet in a mobile app
List-style bottom sheet in a mobile app
Screen edge left & right margins: 16dp
Space below the top list item: 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
Keylines for list-style sheet with header
List-style sheet with header
Margin on all sides of grid: 24dp
Space between grid list rows: 24dp
Grids list icons: 48x48dp, equally spaced across each row
Grid list label: 16dp tall, center-aligned below each icon
Margin below icon: 8dp
Keylines 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
Screen edge left & right margins: 24dp
Space below list row: 8dp
Divider line: 1dp
Space above and below divider line: 8dp
List icons: 48x48dp, middle vertical alignment
Grid list label: 16dp tall, center-aligned below each icon
List title height: 56dp
Keylines for grid-style bottom sheet with header
Keylines for grid-style bottom sheet with header
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.
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