Overlay
Drawer
A drawer is a panel that slides in from the edge of the screen and slides back the same way once you're done, holding menus, filters, or details.
Definition
A drawer is a panel that slides in from the edge of the screen toward the center. Just like a real drawer, it glides out from the left, right, or bottom, and once you're done it slides back the same way and disappears. Inside, you put content you'd normally keep tucked away and only pull out when needed: your site's main navigation, filters for narrowing down a list, or the details of a single item. The most common drawer of all is the menu that slides out from the side when you tap the hamburger button on mobile. The key idea is that you can summon a secondary surface for a moment and fold it away again without ever leaving the page you're on. Your main content stays spread out as it was, and the drawer just borrows one strip along the edge.
Why does it matter?
A drawer's strength lies in where it appears. A modal pops into the middle of the screen and grabs your attention hard, but a drawer emerges quietly from the edge, so it hides less of what you were reading and breaks your focus less. You can still sense the screen behind it out of the corner of your eye, open the drawer just long enough to pick a menu item or adjust a filter, and then return to what you were doing. It's especially handy on narrow mobile screens, where content gets the full stage most of the time and only borrows space for a menu or filter the moment you need it. And while it's open, a scrim covers the background to make it clear that the drawer is where your attention belongs right now. So it keeps the center of the screen free while still pointing, clearly, to what you should be dealing with.
Common mistakes
- Opening the drawer without dimming the background with a scrim. When the screen behind it stays bright, people get confused about whether the drawer is actually open, and they struggle to guess where to tap to close it.
- Making it so that neither tapping outside nor swiping closes the drawer. On mobile especially, swiping toward the edge to dismiss is second nature, so blocking that gesture feels frustrating.
- Cramming too much into a single drawer. When it fills up with deep scroll, you lose the whole point of opening and folding it away quickly, and you end up in a situation where a separate page would have been the better call.
Practical tips
- Lean into the fact that a drawer, unlike a modal, comes from the edge and breaks context less. Use it for content you briefly expand and fold away, like a mobile menu or a filter panel. When it's open, dim the background with a scrim and let an outside click or a swipe close it naturally, which is what people expect.
- Match the direction the drawer opens from to the kind of content it holds. Navigation usually opens from the left, while filters or detail views open from the right or the bottom. Giving each position a consistent meaning helps people get comfortable fast.
- Give the open-and-close slide a short, smooth transition, but avoid heavy animation out of respect for people who prefer reduced motion. Enough movement to let the eye follow which edge it came from is plenty.
Ask your AI
Build a navigation drawer that slides in from the left edge when the mobile hamburger button is tapped. Open navigation from the left as convention expects, and while it's open, cover the background with a semi-transparent scrim (black at about 50% opacity) to signal that the drawer is where attention belongs. Let it close via scrim click, the Esc key, and a swipe toward the left edge — all three — and give the slide a short, smooth 200–300ms transition that's removed entirely for users with prefers-reduced-motion. Base it on the [current header/menu markup] I'm pasting below.
Check whether the drawer code I'm pasting below makes the three classic mistakes, and fix them: (1) it doesn't dim the background with a scrim, so the screen behind stays fully bright; (2) it can't be closed by clicking outside (the scrim) or swiping toward the edge; (3) it's crammed with enough content to cause deep scrolling. Mark each item pass/fail, and for the failures only, return corrected code that adds a scrim, wires up outside-click / swipe / Esc dismissal, and trims the content. If the third one is bad, also tell me whether this should be a separate page instead of a drawer.
I want to attach a [filter or item-detail] panel to my [list screen type — e.g., product list] as a drawer. Since it's not navigation, open it from the right (desktop) or the bottom (mobile bottom sheet) rather than the left, so position carries a consistent meaning, and design it to dim the background with a scrim and close on outside click or swipe. First judge whether this panel's content is light enough to open and fold away quickly or heavy enough to need deep scrolling, and tell me whether a drawer is the right call or a separate page would be better. If a drawer fits, build the markup with the direction, scrim, close behaviors, and a short transition that respects reduced motion.