A navigation drawer is a panel that slides in from the side of the screen to show an app’s top-level destinations, typically opened with a menu icon in the top app bar or a swipe from the screen edge, and closed by selecting an item, tapping outside it or swiping it away. In mobile UX, it is the standard pattern for apps with many destinations or deep hierarchies, and it is defined in detail by Material Design as one of the core navigation components.
The pattern trades visibility for space: it keeps the main content area free of navigation chrome, but it hides destinations behind an extra action. That trade-off explains why its use has narrowed over the past decade, as designers moved frequent destinations to bottom navigation and kept the drawer for secondary or less frequent sections.
How a navigation drawer works
A drawer consists of a sheet anchored to the leading edge of the screen, usually the left in left-to-right languages, holding a vertical list of destinations with icons and labels. The selected destination is marked with an active indicator, and optional section headers and dividers group related items.
When the drawer is modal, the content behind it is covered by a semi-transparent scrim that blocks interaction until the drawer closes. Material Design guidance limits the drawer width to at most 360 dp and leaves a strip of the underlying screen visible on phones, so users always see that they are in a temporary layer rather than a new screen.
| Variant | Behavior | Typical screen size |
|---|---|---|
| Modal drawer | Overlays content with a scrim, closes after selection | Phones and small windows |
| Standard drawer | Sits beside content and can be shown or hidden | Tablets and desktops |
| Permanent drawer | Always visible, cannot be closed | Large screens with many sections |
| Bottom drawer | Rises from the bottom edge as a sheet | Phones with bottom app bars |
Interaction details that matter
Opening the drawer usually relies on the hamburger menu icon and an edge swipe. Since Android introduced gesture navigation, a swipe from the left or right edge also triggers the system back gesture, so apps must handle the conflict carefully, for example by limiting the swipe area or relying on the icon.
- Closing should work through tap on the scrim, swipe toward the edge, the back gesture and selection of an item.
- Each item needs a touch target of at least 48 by 48 dp, with clear spacing between items.
- Focus must move into the drawer when it opens and return to the trigger when it closes, for keyboard and screen reader users.
- Motion should be short, about 200 to 300 milliseconds, and respect reduced motion settings.
- On right-to-left layouts the drawer must mirror to the right edge automatically.
The drawer should also respect the safe area on devices with rounded corners, display cutouts or status bars, so that the first and last items are not clipped or placed under system bars.
Navigation drawer compared with other navigation patterns
The right choice depends on how many top-level destinations exist and how often users switch between them. Usability research and platform guidelines agree that hidden navigation is used less than visible navigation, which makes the drawer a poor fit for the most frequent destinations.
| Pattern | Visible destinations | Best fit |
|---|---|---|
| Bottom navigation | Three to five, always visible | Frequent switching on phones |
| Navigation rail | Three to seven, along the side | Medium-width screens and tablets |
| Navigation drawer | Many, hidden or persistent | Large or deep information spaces |
| Tabs | Two to several, at the top | Peer views within one destination |
| Hamburger menu on the web | Many, hidden | Responsive websites on small screens |
On iOS, the Human Interface Guidelines favor a tab bar for primary navigation on iPhone and a sidebar on iPad, so a drawer copied from an Android design often feels foreign to iPhone users and should be reconsidered rather than ported as is.
Using the drawer in adaptive layouts
Modern Material guidance treats navigation as adaptive: the same set of destinations appears as different components depending on the window size class. This approach keeps navigation consistent while matching the available space and input method.
| Window width | Recommended component | Reason |
|---|---|---|
| Compact, under 600 dp | Bottom navigation or modal drawer | Thumb reach and limited width |
| Medium, 600 to 839 dp | Navigation rail | Space for icons without wasting content area |
| Expanded, 840 dp and above | Standard or permanent drawer | Enough room for labels and sections |
This mapping matters for foldable phones and tablets, where one app may switch between compact and expanded layouts while running. The navigation state, including the selected destination, must survive the change without reloading content.
Common mistakes with drawers
The most frequent error is using the drawer as a catch-all menu for everything the team could not place elsewhere, which produces long, unstructured lists and buries important features. Another is hiding primary actions such as search or creating content inside the drawer, where users rarely look for them.
| Symptom | Cause | Fix |
|---|---|---|
| Key features rarely used | Hidden in the drawer | Move them to bottom navigation or the app bar |
| Accidental back navigation | Edge swipe conflicts with system gestures | Open the drawer with the menu icon |
| Users get lost | No active indicator or unclear labels | Highlight the current destination |
| Overlong list | Unprioritized destinations | Group items and remove rare entries |
In simple terms
A navigation drawer is like a hidden side menu in an app. You tap the icon with three lines, and a panel slides out from the side with a list of the app’s main sections. You pick one, and the panel slides away again.
It keeps the screen tidy, but things inside it are easy to overlook. That is why many apps now put their most-used sections in a bar at the bottom and use the drawer for everything else.
A practical example
A team redesigning a banking app finds that its navigation drawer holds fourteen items, including Payments, Cards and Account history, the three features customers use most. Usage data shows that many customers reach payments only through a shortcut on the home screen and some never discover the card controls at all.
The redesign moves Home, Payments, Cards and Profile into bottom navigation, and keeps the drawer, now reached from the profile area, for settings, documents, help and legal information. On tablets, the same destinations appear in a navigation rail. After release, the team observes that card controls are used far more often and support calls about where to find them decline, while the less frequent sections remain one tap away.