Behavior comparison
Bottom sheet vs Sidebar
Decisive difference
Bottom sheet is a temporary surface rising from the bottom; Sidebar stays in the layout and never traps focus.
Choice criteria, links and sources
- Bottom sheetChoose Bottom sheet if the surface appears for a one-off task, especially on mobile, then goes away.Open entry Bottom sheet
- SidebarChoose Sidebar if navigation must stay visible and persistent in the workspace.Open entry Sidebar
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.
Sidebar
Mission
Sidebar
Choose Chairs in the persistent category navigation, collapse the sidebar, and verify the furniture results reflow without losing focus.
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 persistent category navigation occupies stable layout width beside the same furniture list, marks the current category, and never makes results inert.
- Edge case
- When the product-defined layout no longer has room, a separately named menu can open temporary category navigation for the same 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
Sidebar
Navigating stable sections of a desktop workspace
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.
Sidebar
A side column in document flow rather than an overlay above the page.
- Modality
Bottom sheet
Often modal when expanded, with the background inert behind an overlay.
Sidebar
Non-modal persistent layout region; main content remains active.
- Interactivity
Bottom sheet
Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture.
Sidebar
Holds persistent navigation, filters, or supporting controls.
Nine dimensions
- Trigger
Bottom sheet
A tap opens the sheet; dragging its handle may then change its detent.
Sidebar
Usually present with the layout; a responsive navigation button may reveal it on small screens.
- Modality
Bottom sheet
Often modal when expanded, with the background inert behind an overlay.
Sidebar
Non-modal persistent layout region; main content remains active.
- Placement
Bottom sheet
Attached to the bottom edge and optionally stops at defined heights.
Sidebar
A side column in document flow rather than an overlay above the page.
- Interactivity
Bottom sheet
Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture.
Sidebar
Holds persistent navigation, filters, or supporting controls.
- Focus
Bottom sheet
Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing.
Sidebar
Focus moves normally between the sidebar and main content; collapse preserves a logical focused control.
- Dismissal
Bottom sheet
Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back.
Sidebar
A persistent sidebar is collapsed, not dismissed; any temporary mobile counterpart follows its own Drawer dismissal contract.
- Accessible role
Bottom sheet
dialog[aria-modal=true]
Sidebar
aside > nav[aria-label]
- Use case
Bottom sheet
Showing place details over a mobile map
Sidebar
Navigating stable sections of a desktop workspace
- Mobile behavior
Bottom sheet
Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior.
Sidebar
Collapse it behind explicit navigation or adapt it into a temporary surface; do not squeeze it into a narrow rail.
| Dimension | Bottom sheetBottom sheet | SidebarSidebar |
|---|---|---|
| Trigger | A tap opens the sheet; dragging its handle may then change its detent. | Usually present with the layout; a responsive navigation button may reveal it on small screens. |
| Modality | Often modal when expanded, with the background inert behind an overlay. | Non-modal persistent layout region; main content remains active. |
| Placement | Attached to the bottom edge and optionally stops at defined heights. | A side column in document flow rather than an overlay above the page. |
| Interactivity | Combines controls with vertical dragging; nested content scrolling must not fight the sheet gesture. | Holds persistent navigation, filters, or supporting controls. |
| Focus | Focus enters the modal sheet, remains inside, and returns to the Filters opener after closing. | Focus moves normally between the sidebar and main content; collapse preserves a logical focused control. |
| Dismissal | Close control, Escape, and a downward gesture past the documented threshold dismiss; accidental small drags snap back. | A persistent sidebar is collapsed, not dismissed; any temporary mobile counterpart follows its own Drawer dismissal contract. |
| Accessible role | dialog[aria-modal=true] | aside > nav[aria-label] |
| Use case | Showing place details over a mobile map | Navigating stable sections of a desktop workspace |
| Mobile behavior | Designed for touch reach; preserve the safe area, software keyboard, and nested scroll behavior. | Collapse it behind explicit navigation or adapt it into a temporary surface; do not squeeze it into a narrow rail. |