Behavior comparison

Drawer vs Sidebar

Decisive difference

Drawer is temporary and overlays the page until its task is done; Sidebar is part of the layout and stays visible.

DrawerChoose Drawer if the panel opens for a focused task and then closes, such as filters or a detail view.
SidebarChoose Sidebar if the region must stay in place for navigation or persistent tools.

Decision

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

Dimension	DrawerDrawer	SidebarSidebar
Trigger	An explicit button opens a temporary task or navigation panel.	Usually present with the layout; a responsive navigation button may reveal it on small screens.
Modality	Can be modal or non-modal; the specimen is modal when the page behind it is inert.	Non-modal persistent layout region; main content remains active.
Placement	Slides from a side edge and remains attached to that edge.	A side column in document flow rather than an overlay above the page.
Interactivity	Contains navigation or task controls, with focus contained only in the modal form.	Holds persistent navigation, filters, or supporting controls.
Focus	Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.	Focus moves normally between the sidebar and main content; collapse preserves a logical focused control.
Dismissal	The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.	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	Editing filters without leaving results	Navigating stable sections of a desktop workspace
Mobile behavior	Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model.	Collapse it behind explicit navigation or adapt it into a temporary surface; do not squeeze it into a narrow rail.

Drawer vs Sidebar

Drawer is temporary and overlays the page until its task is done; Sidebar is part of the layout and stays visible.

DrawerChoose Drawer if the panel opens for a focused task and then closes, such as filters or a detail view.
SidebarChoose Sidebar if the region must stay in place for navigation or persistent tools.

Nine dimensions

Dimension	DrawerDrawer	SidebarSidebar
Trigger	An explicit button opens a temporary task or navigation panel.	Usually present with the layout; a responsive navigation button may reveal it on small screens.
Modality	Can be modal or non-modal; the specimen is modal when the page behind it is inert.	Non-modal persistent layout region; main content remains active.
Placement	Slides from a side edge and remains attached to that edge.	A side column in document flow rather than an overlay above the page.
Interactivity	Contains navigation or task controls, with focus contained only in the modal form.	Holds persistent navigation, filters, or supporting controls.
Focus	Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.	Focus moves normally between the sidebar and main content; collapse preserves a logical focused control.
Dismissal	The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.	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	Editing filters without leaving results	Navigating stable sections of a desktop workspace
Mobile behavior	Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model.	Collapse it behind explicit navigation or adapt it into a temporary surface; do not squeeze it into a narrow rail.