Drawer

A drawer is a panel that slides in from an edge of the screen, usually left or right. The flavour most people picture is modal: it floats above the page with a dimmed scrim behind it and nothing else is clickable until it closes. There are quieter flavours. A persistent drawer stays open and shares the layout, pushing or squeezing the content beside it instead of covering it. A dismissible drawer can be toggled away but behaves like part of the page while it is open, no scrim, no focus trap. Mobile navigation behind a hamburger button is the classic modal case, which is where the older name comes from: off-canvas, because the panel waits outside the viewport until it is pulled in.

Reach for a drawer when a secondary surface (nav, filters, a details panel, a quick form) needs full height and should not shove the page around. A bottom sheet is the same idea rotated for thumbs. A sidebar is the cousin that never goes away at all. Pick modal when the panel is a detour and persistent when people work in the panel and the page together, on wide screens especially. A modal drawer owes you the full modal contract: trap focus, close on Escape, close on scrim click, restore focus to the trigger. A persistent one owes you none of that, and bolting it on makes the panel feel like a nag.

Gotcha: body scroll. Without locking the page behind it, scrolling inside the drawer bleeds through to the document underneath, and on iOS you get dumped at a different scroll position when it closes. Animate transform, not width or left, or the panel judders its way in.