Bottom Sheet

Learn more about bottom sheet interactions

What is a bottom sheet?

A bottom sheet has nothing to do with bed linen. And nor is it an obscure euphemism for toilet paper. Instead we’re talking about an expanding surface anchored at the bottom of a page that contains supplementary information which would otherwise not fit on the same screen.

Bottom sheets are typically used only in mobile app design, where lack of screen space makes them a highly valuable asset. As a bottom sheet can be easily opened and closed using just a single thumb-swipe, they are a convenient and ergonomic method of displaying a wide variety of secondary content. Whether you own an iOS or Android device, you will likely already be quite familiar with this interaction from using Google Maps.

Types of bottom sheet

There are two main types of bottom sheet; persistent and modal. Let’s take a look at each of these in turn.

Persistent

As the name suggests, a persistent bottom sheet is displayed permanently – at least in part – at the bottom of the screen, coexisting alongside the screen’s main UI region. Users can view the entire sheet by dragging it upwards to reveal extra content. Similarly, they can hide the additional options by dragging the sheet back down again. Although a portion of a persistent bottom sheet remains visible at all times, it does not interfere with the overall functionality of the page.

Modal

In contrast to persistent bottom sheets, modal ones are ordinarily hidden from view at the bottom of the page, but can be quickly expanded by swiping up. Activating a modal sheet will cause the rest of the app to be deactivated and shadowed-out (i.e. a semi-transparent scrim is applied), meaning that this kind of interaction is more invasive for the user than the persistent bottom sheet design.

As a result of this, a modal sheet should be used only to offer very important extra features that would in any case require the user to momentarily pause all other activity. However it is normally possible to dismiss a modal sheet if necessary; by tapping outside the modal, the menu contracts and the app resumes normal function.

Design and usage

Bottom sheets can vary in height. Most will likely take up half of the screen size, while others may not need to be quite so tall – all depending on the content that must be shown at the bottom of the screen. Often when a bottom sheet initially appears, it will contain content that “bleeds” off the screen. This information can be revealed by dragging upwards.

There are several different use cases for bottom sheets. In their collapsed state, these uses may all look the same, but in practice they can all hold very different content. Some examples of common uses are as a menu; for displaying location information or other dialog; for revealing music player settings; or as a search bar.

How to create a bottom sheet interaction in Framer

It’s easy to make this interaction in Framer. You will need two frames, one for your main screen and one for your bottom sheet. The sheet should be shorter in height than your main screen. Once you have designed the content for your main screen and the sheet, link the main screen to the bottom sheet and set the transition type to overlay. Then, customize your overlay so that it comes up from the bottom on tap. And there you have your bottom sheet interaction!