Bottom Sheet

Learn more about bottom sheet interactions

Bottom sheets are a common interaction found only on mobile sites and apps. Bottom sheets are only used on mobile devices as they are an ergonomic solution to secondary content and can be easily opened and closed by the thumb on one hand. They provide secondary information to the main screen, while the main screen and primary information remain visible behind a backdrop with opacity.

Bottom sheets can vary in height. Most bottom sheets will likely take up half of the screen size while others may not need to be quite so tall depending on the content that must be shown at the bottom of the screen. There are several different use cases for bottom sheets. In their collapsed state, maybe look the same, but they can hold very different content. For example, some common use cases are menus, location information, music player settings, or a search bar.

How to make this interaction in Framer

The bottom sheet in Framer is quite easy to create. You will need two frames, one for your main screen and one for your bottom sheet. The bottom sheet should be a smaller height than your main screen. Once you have designed the content for your main screen and bottom 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 interaction!