Behavior comparison
Bottom sheet vs Drawer
Decisive difference
Bottom sheet is anchored to the bottom edge, opens to stable heights and can be dragged; Drawer enters from a defined side edge.
Choice criteria, links and sources
- Bottom sheetChoose Bottom sheet if the action is compact, especially on mobile, and benefits from staying above the content.Open entry Bottom sheet
- DrawerChoose Drawer if the panel is more structured and enters from the left or right.Open entry Drawer
See the nine dimensionsSee the sources
Edge-attached surfaces
Try it
Should the surface stay persistent, enter from a side edge, or rise from the bottom?
Bottom sheet
Shared trial context
A workspace places supporting navigation or controls along a screen edge while the main task stays in context.
Bottom sheet
Mission
Bottom sheet
On mobile, open Filters, move the sheet between half and full height by drag or buttons, enable In stock, and apply it.
12 results
Office furniture
Compact desk
In stock
Adjustable chair
Made to order
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The temporary mobile sheet is attached to the bottom at half height, keeps the same furniture results visible behind it, and can snap to full height.
- Edge case
- Keyboard users can expand, collapse, apply the availability filter, and close without relying on dragging.
Drawer
Mission
Drawer
Open the right-edge Filters, enable In stock, apply it, then reopen and press Escape to verify the draft is discarded and focus returns.
12 results
Office furniture
Compact desk
In stock
Adjustable chair
Made to order
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- The temporary modal panel enters from the right over the furniture list, makes those results inert, and restores the Filters trigger after closing.
- Edge case
- At narrow widths every filter and action remains reachable, and Escape closes without applying a changed draft over the furniture results.
What this example shows
Bottom sheet is bottom-anchored and may be draggable; Drawer uses a defined side edge, while Sidebar remains part of the persistent layout.
Which fits your need?
Bottom sheet
Showing place details over a mobile map
Drawer
Editing filters without leaving results
Difference and sources
Bottom sheet is bottom-anchored and may be draggable; Drawer uses a defined side edge, while Sidebar remains part of the persistent layout.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Backdrop
The layer that separates a modal surface from inactive page content.
Decision
Family question
Should the surface stay persistent, enter from a side edge, or rise from the bottom?
Three criteria to choose
- Placement
Bottom sheet
Attached to the bottom edge and optionally stops at defined heights.
Drawer
Slides from a side edge and remains attached to that edge.
- Modality
Bottom sheet
Often modal when expanded, with the background inert behind an overlay.
Drawer
Can be modal or non-modal; the specimen is modal when the page behind it is inert.
- Interactivity
Bottom sheet
Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture.
Drawer
Contains navigation or task controls, with focus contained only in the modal form.
Nine dimensions
- Trigger
Bottom sheet
A tap opens the sheet; dragging its handle may then change its detent.
Drawer
An explicit button opens a temporary task or navigation panel.
- Modality
Bottom sheet
Often modal when expanded, with the background inert behind an overlay.
Drawer
Can be modal or non-modal; the specimen is modal when the page behind it is inert.
- Placement
Bottom sheet
Attached to the bottom edge and optionally stops at defined heights.
Drawer
Slides from a side edge and remains attached to that edge.
- Interactivity
Bottom sheet
Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture.
Drawer
Contains navigation or task controls, with focus contained only in the modal form.
- Focus
Bottom sheet
Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing.
Drawer
Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.
- Dismissal
Bottom sheet
Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back.
Drawer
The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.
- Accessible role
Bottom sheet
dialog[aria-modal=true]
Drawer
dialog[aria-modal=true]
- Use case
Bottom sheet
Showing place details over a mobile map
Drawer
Editing filters without leaving results
- Mobile behavior
Bottom sheet
Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior.
Drawer
Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model.
| Dimension | Bottom sheetBottom sheet | DrawerDrawer |
|---|---|---|
| Trigger | A tap opens the sheet; dragging its handle may then change its detent. | An explicit button opens a temporary task or navigation panel. |
| Modality | Often modal when expanded, with the background inert behind an overlay. | Can be modal or non-modal; the specimen is modal when the page behind it is inert. |
| Placement | Attached to the bottom edge and optionally stops at defined heights. | Slides from a side edge and remains attached to that edge. |
| Interactivity | Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture. | Contains navigation or task controls, with focus contained only in the modal form. |
| Focus | Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing. | Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener. |
| Dismissal | Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back. | The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes. |
| Accessible role | dialog[aria-modal=true] | dialog[aria-modal=true] |
| Use case | Showing place details over a mobile map | Editing filters without leaving results |
| Mobile behavior | Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior. | Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model. |