Library / UI components / Drawer
No. 006·noun·also called sheet, side panel, slide-over

Drawer

A panel that slides in from the edge of the screen on demand and slides away when you're done.

SPECIMEN · LIVE DEMO
Definition

What it is

A drawer is a panel that slides in from the left, right, or bottom edge, covering part of the page. It's great for details, filters, or a quick edit while keeping your place.

On phones, a drawer that rises from the bottom is often called a bottom sheet. On desktop, a right-hand drawer is a common way to show a record's details without leaving a list.

A drawer is temporary. If the panel is always visible, it's a sidebar. If it sits in the middle and blocks everything, it's a modal.

Say it like a builder

How to ask for it

Vague

“When I click an order, can the details show up on the side without leaving the list?”

Precise

“Clicking an order row opens a drawer from the right, 480px wide, showing the order details. The list stays visible behind it, and the drawer closes with an X, the Escape key, or a click outside.”

Why it works

"Show up on the side" could be a new column or a sidebar; "drawer" names a temporary sliding panel and the prompt sets its width and how it closes.

In the wild

You've seen this in

  • AThe filter panel on Airbnb's mobile search
  • MClicking a card in Trello on mobile
  • IThe share sheet that rises from the bottom on iPhone
Usage note

Often confused with

SidebarA sidebar is always on screen; a drawer appears on demand.ModalA modal sits in the middle and blocks the page; a drawer slides from an edge.