Bottom Sheet
A panel that slides up from the bottom of a phone screen to show extra content or choices, often draggable between heights, placed where thumbs can reach it on large phones.
A bottom sheet is a panel that slides up from the bottom edge of a mobile screen, covering part of the content beneath it. It holds actions, options, details, or a secondary view, and it can often be dragged up to expand, down to shrink, or flicked away to dismiss. A side sheet does the same from the side, usually on larger screens.
Sheets became prominent as phones grew. On a small phone, a thumb could reach most of the screen; on a large one, the top corners require stretching or a second hand. Studies of how people hold phones found that most taps happen in the lower and middle parts of the screen, so placing controls there makes them easier to reach; see Fitts's Law and Touch Target Size. Navigation also shifted downward, with tab bars replacing menus hidden behind icons at the top; see Hamburger Menu.
Platform guidelines formalized the pattern. Google's Material Design described standard sheets, which coexist with the content behind them, and modal sheets, which block it. Apple's iOS long used action sheets for lists of choices and added sheets with adjustable heights, called detents, in 2021. Map applications popularized the most familiar version: the map fills the screen, and a sheet of search results or place details rests at the bottom, draggable to half or full height without hiding the map entirely.
The choice between modal and non-modal matters. A modal sheet dims the background with a translucent layer and must be dealt with before anything else, like any modal dialog. A non-modal sheet lets people keep interacting with what's behind it, which suits maps and media players. Partial heights also let a sheet reveal a little information and expand on demand, a form of progressive disclosure.
Sheets depend on gestures, which creates problems. Dragging the sheet competes with scrolling content inside it, so designers must decide when a swipe scrolls the list and when it moves the sheet. Swipes are invisible, so a visible handle serves as a Signifier, and a close button helps people who don't discover the gesture or can't perform it. Opening a sheet should move keyboard and screen reader focus into it and return focus when it closes; see Focus Management. Animation should feel physical, following the finger and settling with natural deceleration; see Easing and Direct Manipulation.
On wider screens, sheets often become something else: a dialog in the center, a side panel, or a menu anchored to the button that opened it. Designing for both requires deciding at which width the presentation changes; see Responsive Breakpoint.
See also1
Linked from9
- Direct ManipulationDesign & Interface
Ben Shneiderman's 1983 name for interfaces where people act on visible objects with immediate, reversible feedback, such as dragging a file or resizing a shape, instead of typing commands that describe the change.
- EasingDesign & Interface
The curve mapping elapsed time to progress, and the main reason motion feels right or wrong.
- Fitts's LawDesign & Interface
The time to hit a target shrinks with its size and grows with distance to it — so make frequent targets big and close.
- Focus ManagementDesign & Interface
Deliberately controlling which element receives keyboard focus as an interface changes.
- Hamburger MenuDesign & Interface
The three-line icon that hides a site's or app's navigation behind a tap, a fix for small screens that saves space at the price of making whatever it hides less likely to be found.
- Responsive BreakpointDesign & Interface
A viewport width at which a layout changes, and the assumptions that come with it.
- TabsDesign & Interface
A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.
- Toast NotificationDesign & Interface
A brief, non-blocking message that slides in to confirm an action or report a background event, then disappears on its own.
- Touch Target SizeDesign & Interface
How large a tappable element needs to be for fingers to hit it reliably, roughly 44 to 48 points, and why the visible icon can be smaller than the area that responds.