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.
Choice criteria, links and sources
- DrawerChoose Drawer if the panel opens for a focused task and then closes, such as filters or a detail view.Open entry Drawer
- SidebarChoose Sidebar if the region must stay in place for navigation or persistent tools.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?
Drawer
Shared trial context
A workspace places supporting navigation or controls along a screen edge while the main task stays in context.
Drawer
Mission
Drawer
Open the right-edge Filters, enable In stock, apply it, then reopen and press Escape to verify the draft is discarded and focus returns.
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 modal panel enters from the right over the furniture list, makes those results inert, and restores the Filters trigger after closing.
- Edge case
- At narrow widths every filter and action remains reachable, and Escape closes without applying a changed draft over the furniture results.
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
A Drawer is temporary and overlays content; a Sidebar stays in the layout, while a Bottom sheet is anchored to the bottom and supports mobile drag behavior.
Which fits your need?
Drawer
Editing filters without leaving results
Sidebar
Navigating stable sections of a desktop workspace
Difference and sources
A Drawer is temporary and overlays content; a Sidebar stays in the layout, while a Bottom sheet is anchored to the bottom and supports mobile drag behavior.
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
Drawer
Slides from a side edge and remains attached to that edge.
Sidebar
A side column in document flow rather than an overlay above the page.
- Modality
Drawer
Can be modal or non-modal; the specimen is modal when the page behind it is inert.
Sidebar
Non-modal persistent layout region; main content remains active.
- Interactivity
Drawer
Contains navigation or task controls, with focus contained only in the modal form.
Sidebar
Holds persistent navigation, filters, or supporting controls.
Nine dimensions
- Trigger
Drawer
An explicit button opens a temporary task or navigation panel.
Sidebar
Usually present with the layout; a responsive navigation button may reveal it on small screens.
- Modality
Drawer
Can be modal or non-modal; the specimen is modal when the page behind it is inert.
Sidebar
Non-modal persistent layout region; main content remains active.
- Placement
Drawer
Slides from a side edge and remains attached to that edge.
Sidebar
A side column in document flow rather than an overlay above the page.
- Interactivity
Drawer
Contains navigation or task controls, with focus contained only in the modal form.
Sidebar
Holds persistent navigation, filters, or supporting controls.
- Focus
Drawer
Opening places focus on the drawer heading or first useful field, contains it, and closing restores the opener.
Sidebar
Focus moves normally between the sidebar and main content; collapse preserves a logical focused control.
- Dismissal
Drawer
The named close control and Escape always work; backdrop dismissal is disabled when it could discard changes.
Sidebar
A persistent sidebar is collapsed, not dismissed; any temporary mobile counterpart follows its own Drawer dismissal contract.
- Accessible role
Drawer
dialog[aria-modal=true]
Sidebar
aside > nav[aria-label]
- Use case
Drawer
Editing filters without leaving results
Sidebar
Navigating stable sections of a desktop workspace
- Mobile behavior
Drawer
Use a wide or full-width panel; switch to a bottom sheet when bottom-edge reach is the better model.
Sidebar
Collapse it behind explicit navigation or adapt it into a temporary surface; do not squeeze it into a narrow rail.
| 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. |