--- url: /components/navigation-drawer/guidelines.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](overview.md) · [Specs](specs.md) · **Guidelines** · [Accessibility](accessibility.md) ::: 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. ::: ![Navigation drawer with 4 primary destinations](/assets/2b8a4df2-lwopun3e-1.gMEbmKu9.webp) ## Usage Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or opened and closed by a navigation [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") icon. One navigation destination is always active. Navigation drawers are recommended for: * Apps with 5 or more top-level destinations * Apps with 2 or more levels of navigation hierarchy * Quick navigation between unrelated destinations * Replacing the [navigation rail](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") or [navigation bar](../navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices.") on large screens ::: tip Do ![Navigation drawer with multiple destinations in a mail app.](/assets/8a52795b-lwopv1qw-2.B0XpZhLi.webp) Use a navigation drawer for 5 or more primary destinations, or more than 1 level of navigation hierarchy ::: Avoid using a navigation drawer with other primary navigation components, such as a navigation bar. Instead, choose a single navigation component based on product requirements and breakpoints: * [Navigation bars](../navigation-bar/overview.md "Navigation bars let people switch between UI views on smaller devices.") for [compact breakpoints](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation.") * [Navigation rails](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") for [medium](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") and [expanded breakpoints](../../foundations/layout/breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop.")  * Standard navigation drawers for expanded, [large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1200dp to 1599dp, such as desktop.") and [extra-large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.") breakpoints ::: warning Caution ![Standard navigation drawer and navigation bar used together.](/assets/60877c59-lwopvjco-3.DSUK8CYM.webp) Avoid using two navigation components on the same screen ::: There are two variants of navigation drawers: 1. Standard navigation drawer 2. Modal navigation drawer ![Standard navigation drawer with destinations in mail app.](/assets/0aa042e1-lwopw575-4.B1Dq2lsE.webp) Standard navigation drawer ![Modal navigation drawer with destinations and scrim.](/assets/d5967104-lwopwhen-5.BKKcg8e5.webp) Modal navigation drawer ### Standard navigation drawer Standard navigation drawers provide access to drawer destinations and app content for [layouts](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.") 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](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.") breakpoints.  Standard drawers can be permanently visible (best for frequently switching destinations) or opened and closed by tapping a [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") icon (best for focusing more on screen content). In [medium](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") and [compact breakpoints](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation."), use modal drawers instead. ![Standard navigation drawer in a mail app with active destination “Inbox” next to app content.](/assets/2a90ab9e-lwopx4a0-6.BWaTtAfM.webp) Standard navigation drawer providing access to drawer destinations next to app content ### Modal navigation drawer Modal navigation drawers use a scrim to block interaction with the rest of an app’s content, and don’t affect the screen’s [layout](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.") grid. Modal navigation drawers can be used in any breakpoint, but are primarily used in compact and medium sizes where space is limited or prioritized for app content. They can be swapped with standard drawers on expanded, [large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1200dp to 1599dp, such as desktop."), and [extra-large](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.") breakpoints. ![Modal navigation drawer with 1 active destination and scrim.](/assets/e5abff53-lwopxvvj-7.CPdWDXTO.webp) Modal navigation drawer using a scrim to block interaction with the rest of an app’s content Modal navigation drawers are always opened by an action outside of the drawer, such as clicking a navigation [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") icon in a [navigation rail](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices."). Modal drawers can be dismissed by: * Selecting a drawer item * Tapping the scrim * Swiping toward the drawer’s anchoring edge (for example, swiping right-to-left for a left-aligned navigation drawer) ![Diagram noting a navigation menu icon in a navigation rail.](/assets/925ecb91-lwopy7b1-8.DGAk_YEV.webp) A modal drawer opened by an action such as clicking a navigation menu icon (1) Modal drawers can be dismissed by tapping the scrim or swiping the drawer toward its anchoring screen edge. ![2 modal navigations illustrating tapping the scrim or swiping to dismiss a modal drawer](/assets/8e125791-lwopyjta-9.BRVS-522.webp) 1\. Dismiss by tapping the scrim
2. Dismiss by swiping the drawer ## Anatomy Navigation drawers are essentially a [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") contained within a [side sheet](../side-sheets/overview.md "Side sheets show secondary content anchored to the side of the screen."). They can also include headers, subheads, and [dividers](../divider/overview.md "Dividers are thin lines that group content in lists or other containers.") to organize longer lists. ![Navigation drawer diagram numbering 8 elements.](/assets/56b4746b-lwopzqbr-10.CEWRXiF5.webp) Navigation drawers can include headers, subheads, and dividers to organize longer lists 1. Active Indicator 2. Icon 3. Label 4. Badge label 5. Sheet 6. Divider 7. Section label (optional) 8. Scrim ### Sheet A sheet holds all navigation drawer elements. [Side sheets](../side-sheets/overview.md "Side sheets show secondary content anchored to the side of the screen.") are used as the container for standard and modal navigation drawers. Navigation drawers that open from the side are always placed on the start edge of the screen, on the left for left-to-right (LTR) languages, and on the right for right-to-left (RTL) languages. ::: tip Do ![Modal navigation drawer opening from left side of screen.](/assets/aea471d6-lwoq08ti-11.BMNcquQI.webp) A navigation drawer opens from the left side of the screen for left-to-right languages ::: ### Divider (optional) [Dividers](../divider/overview.md "Dividers are thin lines that group content in lists or other containers.") can be used to separate groups of destinations within the navigation drawer. ::: tip Do ![Navigation drawer using horizontal dividers to separate a group of destinations](/assets/0bd37dca-lwoq1xf0-12.BwaaBHoM.webp) Use full-width dividers (1) to separate groups of destinations ::: ::: danger Don't ![Navigation drawer using horizontal dividers to separate individual destinations](/assets/2c1078cd-lwoq29df-13.DlVJbeAo.webp) Don’t use dividers to separate individual destinations ::: ### Active indicator The active indicator is a background shape communicating which destination of the navigation drawer is currently being displayed. ![Navigation drawer diagram numbering 1 element.](/assets/b9ab7601-lwoq2qbs-14.BPAFZWdO.webp) The active indicator (1) is a background shape communicating which destination of the navigation drawer is currently being displayed ### Label text and icons Destinations in a navigation drawer take the form of actionable [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") items. Each item describes its destination using label text and an optional icon. ![Navigation drawer diagram numbering 2 elements.](/assets/10e84f58-lwoq358i-15.BYDK07uD.webp) Actionable list items in a navigation drawer describe each destination using (1) an optional icon and (2) required label text Label text should be clear and short enough that it isn’t cut off by the sheet. ![Navigation drawer using only label text for 4 destinations. Label text “Inbox” in active destination.](/assets/b4b67f38-lwoq3i6v-16.Bq7RPdu0.webp) Navigation drawers can use text labels without icons ::: tip Do ![Navigation drawer with 1 truncated text label.](/assets/f5fbd50d-lwoq4gjj-17.jHgI_E1b.webp) Keep text labels concise, but truncate them if they extend beyond the container width ::: ::: danger Don't ![Navigation drawer with 1 text label with wrapped label text.](/assets/de109b37-lwoq4tkk-18.DVOnvW4V.webp) Don’t wrap label text ::: ::: danger Don't ![Navigation drawer with 1 text label featuring smaller text.](/assets/34e6688d-lwoq56gb-19.DW20Jsz8.webp) Don’t shrink text size in order to fit a text label on a single line ::: Icons can supplement labels as indicators of a destination. When used, they should always be placed before text. Other app components and content should reference these icons. ::: tip Do ![Navigation drawer with active destination “Inbox” featuring recognizable icon.](/assets/4385511d-lwoq67nf-20.BG6oKS6O.webp) Use recognizable icons when conventions exist ::: ::: danger Don't ![Navigation drawer with 4 destinations, 2 with text label and icon, 2 with only text label.](/assets/46e1eff1-lwoq6mto-21.B5CU63SV.webp) Don’t apply icons to some destinations and not others. Icons should be used for all destinations, or none. ::: ### Section label (optional) Short subhead section labels can help group related destinations in the navigation drawer. ![Navigation drawer showing subhead section labels.](/assets/8250bc80-lwoq710s-22.CAwRwb4n.webp) Related destinations can be grouped using short subhead section labels in the navigation drawer ### Scrim (modal only) Modal navigation drawers use a scrim to block interaction with the rest of the app. The scrim is placed directly behind the drawer’s sheet and can be tapped or clicked to dismiss the drawer. ![Modal navigation drawer with scrim placed behind.](/assets/8a52795b-lwopv1qw-2.B0XpZhLi.webp) Scrim applied behind a modal navigation drawer ## Responsive layout A product’s navigation component should change to suit the [breakpoint](../../foundations/layout/breakpoints/overview.md "Breakpoints are opinionated window sizes where a layout changes to match available space, device conventions, and ergonomics (previously window size classes).") and form factor of the screen. Modal navigation drawers can be used at any breakpoint but are most common 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."). Standard navigation drawers are best for [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](../../foundations/layout/breakpoints/large-extra-large.md "Window widths 1600dp and larger, such as ultra-wide monitors.") breakpoints.  Use a transition when swapping components. For example, when switching from a portrait to landscape [layout](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen."), the [navigation rail](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") should transform into a navigation drawer. ![Navigation rail changing to navigation. drawer on a larger screen](/assets/57b2ec02-lwoq7wck-24.oVYVocUd.webp) Standard navigation drawers change size to suit the device’s screen ### Compact breakpoint Use modal navigation drawers in [compact breakpoints](../../foundations/layout/breakpoints/compact.md "Window widths smaller than 600dp, such as a phone in portrait orientation."). Or swap the drawer for a navigation bar. On web, when the screen size is smaller than 320 [CSS pixels](https://www.w3.org/Style/Examples/007/units.en.html "CSS pixels are the most common unit of measurement when developing for the web."), swap the navigation drawer for a navigation bar to ensure [accessibility](../../foundations/overview/principles.md "Accessible design makes products usable for people with all kinds of abilities."). ![Modal navigation drawer with 1 active destination.](/assets/8a52795b-lwopv1qw-2.B0XpZhLi.webp) Use a modal navigation drawer on mobile screens ### Medium & expanded breakpoints Use a modal navigation drawer alone or with a navigation rail on [medium](../../foundations/layout/breakpoints/medium.md "Window widths from 600dp to 839dp, such as a tablet or foldable in portrait orientation.") and [expanded](../../foundations/layout/breakpoints/expanded.md "Window widths 840dp to 1199dp, such as a tablet or foldable in landscape orientation, or desktop.") breakpoints. When a [navigation rail](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") and modal navigation drawer are used together, the drawer can repeat destinations in the navigation rail as long as the drawer offers enough visual separation between levels of the navigation hierarchy. A standard navigation drawer can be used in [single pane layouts](../../foundations/layout/layout-overview/parts-of-layout.md) in expanded breakpoints. Use a navigation rail on tablet screens, or also allow a drawer to open and close via a menu icon ### Large and extra-large breakpoints For web experiences on laptop and desktop devices, use either a standard navigation drawer, or a [navigation rail](../navigation-rail/overview.md "Navigation rails let people switch between UI views on mid-sized devices.") that transitions into a modal navigation drawer.

![Navigation drawer showing 1 active destination.](/assets/f03f66fd-lx54v3bi-27.BlRKojcW.webp) Use a standard navigation drawer on large and desktop screens ## Behavior ### Scrolling Navigation drawers can be vertically scrolled, independent of the rest of the screen’s content and UI. If the [list](../lists/overview.md "Lists are continuous, vertical indexes of text and images.") of navigation destinations is longer than the height of the drawer, the drawer’s contents can be scrolled within the drawer. When a navigation drawer is scrolled, the body content should remain stationary ### Visibility **Dismissible standard drawers** can be used for [layouts](../../foundations/layout/layout-overview/overview.md "Layout is the visual arrangement of elements on the screen.") that prioritize content (such as a photo gallery) or for apps where users are unlikely to switch destinations often. They should use a visible navigation [menu](../menus/overview.md "Menus display a list of choices on a temporary surface.") icon to open and close the drawer. ![Side-by-side standard navigation drawer opened and then closed after tapping menu bar.](/assets/e414c440-lwoqb1nm-27.D--3oGdX.webp) A standard dismissible navigation drawer is opened and closed by tapping the navigation menu icon in the app bar (1), and remains open until the menu icon is tapped again (2) **Permanently visible standard drawers** allow quick navigation between unrelated destinations. They can’t be closed or dismissed by the user. ![Standard navigation drawer moving between destinations.](/assets/60333285-lwoqf0gp-28.Cqv9ojVk.webp) A permanently-visible standard navigation drawer on desktop ### Appearing When a navigation drawer animates on screen, it uses an [enter and exit](../../styles/motion/transitions/transition-patterns.md) transition pattern. A navigation drawer animating on screen