Concept cluster
Edge-attached surfaces
Compare a temporary side panel, a draggable mobile sheet, and a persistent layout region.
Try the 3 concepts, compare what changes, then use the Pack that fits your need.
Try the componentsEdge-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.
Bottom sheet
Mission
Bottom sheet
On mobile, open Filters, move the sheet between half and full height by drag or buttons, enable In stock, and apply it.
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 mobile sheet is attached to the bottom at half height, keeps the same furniture results visible behind it, and can snap to full height.
- Edge case
- Keyboard users can expand, collapse, apply the availability filter, and close without relying on dragging.
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
Bottom sheet
Showing place details over a mobile map
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.
The three concepts
The three comparisons
Signals you are confusing them
These descriptions fit every concept in the cluster, so none of them is enough to decide.
- a supporting panel is attached to a side or bottom edge
- edge content may cover the page sit beside it or move on mobile