Drawer

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.

Related concepts