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.

Bottom sheetChoose Bottom sheet if the surface appears for a one-off task, especially on mobile, then goes away.
SidebarChoose Sidebar if navigation must stay visible and persistent in the workspace.

See the nine dimensions See the sources

Decision

Family question

Should the surface stay persistent, enter from a side edge, or rise from the bottom?

Nine dimensions

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.

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.

Bottom sheetChoose Bottom sheet if the surface appears for a one-off task, especially on mobile, then goes away.
SidebarChoose Sidebar if navigation must stay visible and persistent in the workspace.

See the nine dimensions See the sources

Nine dimensions

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.