Behavior comparison
Choose Bottom sheet for: Showing place details over a mobile map. Choose Sidebar for: Navigating stable sections of a desktop workspace.
| 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 with aria-modal=true while the sheet makes the furniture results inert | aside containing a named navigation region |
| 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. |