---
url: /components/navigation-drawer/overview.md
description: >-
  Navigation drawers let people switch between UI views on larger devices.
  Navigation drawers provide access to destinations in your app.
---

# Navigation drawer

Navigation drawers let people switch between UI views on larger devices. Navigation drawers provide access to destinations in your app.

**Overview** · [Specs](specs.md) · [Guidelines](guidelines.md) · [Accessibility](accessibility.md)

![Navigation drawer](/assets/d8c55002-mrolqnn9-nav-drawer.DTbEWPOz.webp)

::: info Note
The navigation drawer is no longer recommended in the Material 3 Expressive update. For those who have updated, use an [expanded navigation rail](../navigation-rail/overview.md), which has mostly the same functionality of the navigation drawer and adapts better across breakpoints.
:::

* Use standard navigation drawers in [expanded](../../foundations/layout/breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop."), [large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1200dp to 1599dp, such as desktop."), and [extra-large breakpoints](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.")
* Use modal navigation drawers in [compact](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation.") and [medium breakpoints](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.")
* Can be open or closed by default
* Two variants: standard and modal
* Put the most frequent destinations at the top and group related destinations together

![2 variants of navigation drawers: standard and modal.](/assets/a60fbf08-lwoorr6v-1.9LyhsxGL.webp)

1. Standard navigation drawer
2. Modal navigation drawer

## Availability & resources

| Type | Resource | Status |
| --- | --- | --- |
| Design | [Design Kit (Figma)](https://www.figma.com/community/file/1035203688168086460) | Available |
| Implementation | [Flutter](https://api.flutter.dev/flutter/material/NavigationDrawer-class.html) | Available |
| Implementation | [Jetpack Compose](https://developer.android.com/develop/ui/compose/components/drawer) | Available |
| Implementation | [Android Views (MDC-Android)](https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationDrawer.md) | Available |
| Implementation | Web | Unavailable |

## M3 Expressive update

**May 2025**

The navigation drawer is no longer recommended. Use the [expanded navigation rail](../navigation-rail/overview.md "Expanded navigation rails show text labels and an extended FAB, and can be default or modal.") instead. [More on M3 Expressive](https://m3.material.io/blog/building-with-m3-expressive)

## Differences from M2

* Color: New color mappings and compatibility with [dynamic color](../../styles/color/dynamic/choosing-a-source.md "Dynamic color takes a single color from a user's wallpaper or in-app content and creates an accessible color scheme assigned to elements in the UI.")
* Variants: Distinguishes two separate variants of navigation drawer: Standard and modal
* Shape: Rounded corners at the ending edge of the drawer
* [States](../../foundations/interaction/states/overview.md "States show the interaction status of a component or UI element."): Updated color and shape for indicating selected state

![M2 navigation drawer with 4 destinations in a mail app. The active destination “Inbox” is rectangular.](/assets/88360869-ldox2g48-navdrawer_old_m2.CmPDF_Y2.webp)

M2: Navigation drawer had square corners and a rectangular shape indicating the active destination

![M3 navigation drawer with 4 destinations in a mail app. The active destination “Inbox” has rounded corners.](/assets/9e4f205b-lzdbjtd0-4.BE_B6pn1.webp)

M3: Navigation drawer has rounded corners, new color mappings, and an updated style for indicating the active destination