Behavior comparison
Choose Drawer for: Editing filters without leaving results. Choose Sidebar for: Navigating stable sections of a desktop workspace.
| 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 with aria-modal=true for the modal specimen | aside containing a named navigation region |
| 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. |