Designpedia
All terms
Overlays & Surfaces

Drawer (Navigation Drawer)

also known as nav drawer, hamburger menu, sidebar menu

A navigation drawer is a surface that slides in from the side (usually left) to reveal an app's main navigation destinations. It can be modal (overlays content with a scrim, common on mobile), standard/permanent (stays docked on larger screens), or dismissible. It's most often opened by a hamburger icon.

See it live — shadcn/ui · MUI · Ant Design
Don't confuse it with
A drawer is specifically for primary navigation between app sections; a side sheet holds supplementary content like filters. A drawer comes from the side and is persistent-capable, whereas a bottom sheet comes from the bottom. Both are sheets, but a drawer's job is navigation.
In the wild
Tapping the hamburger icon in the Gmail mobile app opens the navigation drawer.
Tags
Sources