Navigation drawer

Navigation drawers provide access to destinations in your app.

Android Web check Flutter iOS

Usage

Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon.

Navigation drawers are recommended for:

  • Apps with five or more top-level destinations
  • Apps with two or more levels of navigation hierarchy
  • Quick navigation between unrelated destinations
DoUse a navigation drawer for five or more primary destinations.
CautionAvoid using a navigation drawer with other primary navigation components, such as a bottom navigation bar.

Principles

Identifiable

The placement and list-style content of navigation drawers clearly identify them as navigation.

Organized

Navigation drawers order destinations according to user importance, with frequent destinations first and related ones grouped together.

Contextual

Navigation drawers can be shown or hidden to accommodate different app layouts.


Types

Standard navigation drawers allow users to simultaneously access drawer destinations and app content. They are often co-planar with app content and affect the screen’s layout...

Standard drawer
Standard navigation drawers allow users to simultaneously access drawer destinations and app content. They are often co-planar with app content and affect the screen’s layout grid.

Standard drawers can be permanently visible or opened and closed by tapping a navigation menu icon. They can be used on tablet and desktop only. On mobile, modal drawers are used instead.
Modal drawer
Modal navigation drawers use a scrim to block interaction with the rest of an app’s content. They are elevated above most app elements and don’t affect the screen’s layout grid.

They are primarily for use on mobile, where screen space is limited. They can be replaced by standard drawers on tablet and desktop.
Bottom drawer
Bottom navigation drawers are a specialized type of modal drawer for use with a bottom app bar.

For increased reachability from the bottom app bar’s menu icon, they open from the bottom of the screen rather than the side.

Anatomy

Navigation drawers contain a list embedded within a sheet. They can be enhanced with headers and dividers to organize longer lists.

1. Container
2. Header (optional)
3. Divider (optional)
4. Active text overlay
5. Active text
6. Inactive text
7. Subtitle
8. Scrim (modal only)

Sheet

The contents of a navigation drawer are contained within a side or bottom sheet. Navigation drawers that open from the side are placed on the...

The contents of a navigation drawer are contained within a side or bottom sheet. Navigation drawers that open from the side are placed on the left of the screen for left-to-right languages, and on the right of the screen for right-to-left languages.

DoA navigation drawer sheet can open from the left side of the screen for left-to-right languages (1), or from the bottom of the screen when paired with a bottom app bar (2). Scaled down to 62.5%
Don'tDon’t open a navigation drawer from the right side of the screen unless the app is set to a right-to-left language.

Destinations

Destinations in a navigation drawer take the form of actionable list items. Each item describes its destination using a text label and optional iconography. Text...

Destinations in a navigation drawer take the form of actionable list items. Each item describes its destination using a text label and optional iconography.

Destination labels

Text labels should be clear and short enough that they aren’t cut off by the sheet.

DoNavigation drawers can use text labels without icons.
DoKeep text labels concise, but truncate them if they extend beyond the container width.
Don'tDon’t wrap label text.
Don'tDon’t shrink text size in order to fit a text label on a single line.

Destination iconography (optional)

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.

DoUse recognizable icons when conventions exist.
Don'tDon’t use the same icon to represent different primary destinations.
CautionSecondary destinations can be represented by the same icon, especially if they are part of a collection (1).
Don'tDon’t apply icons to some destinations and not others. Icons should be used for all destinations, or none.

Dividers (optional)

Horizontal dividers can be used to separate groups of navigation destinations within the list. They extend across the full width of the drawer. A divider...

Horizontal dividers can be used to separate groups of navigation destinations within the list. They extend across the full width of the drawer.

DoUse full-width dividers (1) to separate groups of destinations (2).
Don'tDon’t use dividers to separate individual destinations.

Header (optional)

The header area of a navigation drawer is a flexible space that can be used for brand expression (such as an app title or logo),...

The header area of a navigation drawer is a flexible space that can be used for brand expression (such as an app title or logo), an account switcher, and more.

DoIf access to account switching is a priority, an account switcher can be placed in the header area of a navigation drawer.
DoIf a navigation drawer is the full vertical height of the page, you can place a branding element or product name in the header area.
Don'tIf a navigation drawer is clipped by a top app bar, don’t place a branding element or product name in the header. In this case the top app bar is a more suitable place for that content.

Scrim (modal and bottom only)

Modal navigation drawers use a scrim to block interaction with the rest of the app. The scrim is placed directly below the drawer’s sheet and...

Modal navigation drawers use a scrim to block interaction with the rest of the app. The scrim is placed directly below the drawer’s sheet and can be tapped or clicked to dismiss the drawer.

Scrims applied to a modal side navigation drawer (1) and bottom navigation drawer (2)

Behavior

Scaling and adaptation

Large screen layouts include three main elements:

  1. App bars
  2. Navigation (at the leading edge)
  3. Body
Diagram of a large-screen layout labeling 3 elements of its anatomy
1. App bar 2. Navigation 3. Body

The navigation region holds navigational components and elements. It helps users navigate between destinations and initiate key actions.

Margins greater than 304dp

If the leading margin is 304dp, use a navigation drawer (256dp) with a 48dp margin without adjusting the body or trailing margin.

Diagram of a 256dp width navigation drawer with a 48dp margin. The body region has 304dp left and right margins.

Margins greater than 48dp: Shift right

If the right margin is greater than 48dp, the body region compresses to the right to make room for the navigation region to expand.

Layout diagram showing a body shifting towards the right and a responsive right margin

Collapsing the navigation region

Users may want to collapse the navigation drawer into a navigation rail to increase information density and maximize available screen space. Use a 48dp margin between a navigation rail and the body region.

Diagram of a layout with a 72dp width collapsed navigation drawer

Component swapping

Component swapping means that components with similar functions can be swapped to make larger-scale changes to the ergonomics and function of an interface.

One example of component swapping is a bottom navigation component in a mobile view exchanging place with a navigation rail on a tablet, and this can also swap to become a navigation drawer on large screens.

Bottom navigation bar on a mobile UI

Small breakpoints: 360-599dp

For small devices like phones, horizontal space is at a premium; the content area of an app usually spans the entire width of a screen. In this case, smaller navigation components should anchor to the top or bottom of a layout, saving space while making primary destinations accessible.

Navigation rail on a tablet UI

Medium breakpoints: 600-1239dp 

On medium-sized devices like tablets, move primary navigation elements into a navigation rail that is fixed to the leading edge of the layout.

Navigation drawer on a large screen UI

Large breakpoints: 1240dp+ 

On devices with 1240dp+ widths, present destinations in a permanently visible or dismissible navigation drawer. Assign hierarchy based on how frequently or quickly a user needs to move between destinations.

When a navigation rail and modal navigation drawer are used together, the modal drawer can repeat destinations in the navigation rail as long as the drawer offers enough visual separation between levels of the navigation hierarchy.

Navigation rail and modal navigation drawer
The modal navigation drawer can repeat destinations from the navigation rail.

Component transition

Use a transition to signal the switch of an on-screen component. For example, when shifting from portrait to landscape orientations, the navigation rail should transform into a navigation drawer.

Diagram of a navigation rail transitioning into a navigation drawer between medium and large breakpoints.

Standard drawer

Usage

Standard navigation drawers allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but...

Standard navigation drawers allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.

Alternatives

  • Modal drawer: In a responsive layout grid, at a defined minimum breakpoint of at least 600dp width, a standard drawer should be replaced with a modal drawer.
  • Permanently visible drawer: When users need to switch destinations frequently (and screen size allows), a permanently visible drawer can be used.
  • Dismissible drawer: A dismissible drawer can be used when users are likely to focus on screen content and require less frequent access to its navigation destinations.
A dismissible drawer.

Behavior

Scrolling

Navigation drawers can be vertically scrolled, independent of the rest of the screen’s content and UI. If the list of navigation destinations is longer than the height of the drawer, the drawer’s contents can be scrolled within the drawer.

Visibility

The visibility of a standard navigation drawer depends on screen size, app layout, and frequency of use.

  • Dismissible standard drawers can be used for layouts 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 icon to open and close the drawer.
  • Permanently visible standard drawers allow quick pivoting between unrelated destinations. They require a menu icon for control because they can’t be dismissed by the user.
A standard dismissible navigation drawer is opened and closed by tapping the navigation menu icon in the top app bar (1), and remains open until the menu icon is tapped again (2).
A permanent navigation drawer on desktop

Elevation

A standard navigation drawer can use one of these elevation positions: The Material Design responsive layout grid adapts to screen size and orientation. This UI...

A standard navigation drawer can use one of these elevation positions:

  • At the same elevation as a top app bar (full-height)
  • At a lower elevation than a top app bar (clipped)
Full-height
A full-height navigation drawer is at the same elevation as a top app bar.
Clipped
A clipped navigation drawer is at the same elevation as content that scrolls beneath a top app bar.

Modal drawer

Usage

Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

They are primarily for use on mobile where screen space is limited, and can be replaced by standard drawers on tablet and desktop.

A modal drawer on mobile

Behavior

Modal navigation drawers are always opened by an affordance outside of the drawer, such as a navigation menu icon in a top app bar. Modal...

Opening and closing

Modal navigation drawers are always opened by an affordance outside of the drawer, such as a navigation menu icon in a top app bar.

Modal drawers can be dismissed by:

  • Selecting a drawer item
  • Tapping the scrim
  • Swiping toward the drawer’s anchoring edge (e.g. swiping right-to-left for a left-aligned navigation drawer)
DoA modal drawer is always opened by a navigation menu icon (1).
Modal drawers can be dismissed by tapping its scrim (1) or swiping the drawer toward its anchoring screen edge (2).

Scrolling

If the list of navigation destinations is longer than the height of the drawer, the list can vertically scroll in the drawer.


Bottom drawer

Usage

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only...

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.

These drawers open upon tapping the navigation menu icon in the bottom app bar. They are only for use on mobile.

Bottom navigation drawer

Behavior

As with other modal bottom sheets, the initial vertical position of a bottom navigation drawer is based on its content and screen height. They initially...

Opening on mobile (portrait orientation)

As with other modal bottom sheets, the initial vertical position of a bottom navigation drawer is based on its content and screen height. They initially cannot open above 50% of the screen’s height.

  • If drawer contents are under 50% of screen height, open the drawer to full height at all times
  • If drawer contents are greater than 50% of screen height, open them to 50% initially, then allow a user to drag the drawer upward to its full height or screen height (whichever comes first)
DoOpen bottom navigation drawers that contain only a few items to their full height (A).
Don'tDon’t extend the height of a drawer beyond its contents.
DoAdjust the opening position of your bottom navigation drawer so the last list item in view is clipped by the bottom of the screen. This can inform users that there are more items to view.

Opening on mobile (landscape orientation)

In landscape orientation on mobile, taller bottom navigation drawers automatically open to full-screen mode.

A bottom drawer opens to full-screen mode on mobile in a landscape orientation.
Don'tDon’t open a bottom drawer to half the screen height in landscape mode.

Scrolling

Bottom navigation drawers can be internally scrolled once they have been opened to full screen height.

When initially opened to 50% of the screen height, the drawer must be dragged to screen height before additional items are revealed. Upon scroll, the drawer's header becomes an elevated top app bar with a close affordance.

DoAllow a bottom drawer’s contents to be scrolled when at full height.
Don'tDon’t scroll a bottom drawer’s contents when it’s not at full-screen height.

Content hierarchy

Because the number of bottom navigation drawer content items aren’t all visible at first, the content of the drawer should be ordered as follows:

Because the number of bottom navigation drawer content items aren’t all visible at first, the content of the drawer should be ordered as follows:

  1. List items first that are most likely to be frequently accessed by users
  2. If an account switcher is used, place it at the top of the drawer

States

The destinations within a navigation drawer take the form of list items. Each item can be activated, inactive, focused, pressed, and hover.

1. Activated
The current screen, or its parent, is represented with an activated state. Only one item in a navigation drawer can be activated at a time. This state should have strong visual contrast from unactivated items.

2. Inactive
Inactive is the default state for items in a navigation drawer.

3. Focus
4. Pressed
5. Hover
DoThe inbox item is active.
Don'tDon’t activate more than one drawer item at a time.

Theming

Fortnightly Material Theme

This news app’s modal navigation drawer has been customized using Material Theming. Areas of customization include color and typography. Fortnightly is a news app that...

Color

Fortnightly’s modal navigation drawer uses custom color on six elements: sheet, activated icon, activated text, activated overlay, navigation item, and scrim.

Element Category Attribute Value
Container Surface Color
Opacity
#FFFFFF
100%
Activated icon, Activated text Primary Color
Opacity
#661FFF
100%
Activated overlay Primary Color
Opacity
#661FFF
12%
Inactive item On Surface Color
Opacity
#000000
100%
Scrim On Surface Color
Opacity
#000000
32%

Typography

Fortnightly’s modal navigation drawer text uses custom typography.

Element Category Attribute Value
Text Body 2 Typeface
Font
Size
Case
Libre Franklin
Regular
14
Title case

Shape

Fortnightly’s side navigation drawer container has custom corners, with cut corner shapes.

*Side navigation drawers can only be shaped on the top-right and bottom-right corners.
Element Category Attribute Value
Container Large component Family
Size
Cut
n/a; 0;0; n/a dp*

Posivibes Material Theme

This social media app’s bottom navigation drawer has been customized using Material Theming. Areas of customization include color and typography. The Material Design color system...

This social media app’s bottom navigation drawer has been customized using Material Theming. Areas of customization include color and typography.

Posivibes’ customized navigation drawer

Color

Posivibes’ bottom navigation drawer uses custom color on six elements: sheet, activated icon, activated text, activated overlay, navigation item, and scrim.

Element Category Attribute Value
Container Surface Color
Opacity
#FFFFFF
100%
Activated icon, Activated text Primary Color
Opacity
#000000
100%
Activated overlay Primary Color
Opacity
#000000
12%
Inactive item On Surface Color
Opacity
#000000
100%
Scrim On Surface Color
Opacity
#FFFFFF
60%

Typography

Posivibes’ bottom navigation drawer text uses custom typography.

Element Category Attribute Value
Text Body 2 Typeface
Font
Size
Case
Roboto Condensed
Regular
14
Title case

Shape

Posivibes’ bottom navigation drawer container has custom corners, with cut corner shapes.

*Bottom navigation drawer can only be shaped on the top-left and top-right corners.
Element Category Attribute Value
Container Large component Family
Size
Cut
0;0; n/a; n/a dp*

Specs

Standard navigation drawer

  • Measurement 42
  • Measurement 16
  • Measurement 64
  • Measurement 256
 

Modal navigation drawer

  • Measurement 16
  • Measurement 640
  • Measurement 18
  • Measurement 20
  • Measurement 36
  • Measurement 48
  • Measurement 8
  • Measurement 56
  • Measurement 8
  • Measurement 28
 

Bottom navigation drawer

  • Measurement 1/2 screen height
  • Measurement 360
  • Measurement 36
  • Measurement 16
  • Measurement 20
  • Measurement 48
  • Measurement 18
 

Using navigation drawers

Before you can use navigation drawers, you need to add a dependency to the Material Components for Android library. For more information, go to the getting started page. For modal navigation drawers you also need to add a dependency to tne AndroidX DrawerLayout library. For more information go to the releases page.

The content of all navigation drawer types can be implemented using a NavigationView.

Note: The layout_width and layout_height attributes should be set to wrap_content, match_parent, or a custom dimension depending on the navigation drawer type and parent ViewGroup.

Adding a menu

Nav drawer with 3 menu items

In the layout:

In res/menu/navigation_drawer.xml:

Adding a header

Nav drawer with "Header title", "Header text", and 3 items with heart icons.
Item 1 is selected.

In the layout:

In res/layout/header_navigation_drawer.xml:

Adding dividers and subtitles

Nav drawer with "Header title", "Header text", “Subtitle”, and 5 items with
heart icons divided between 1 to 3, 4 to
5

Dividers are automatically added between <group>s with unique IDs. When a sub-<menu> is added to an item it is treated as a subtitle.

In res/menu/navigation_drawer.xml:

Making navigation drawers accessible

Navigation drawers support content labeling for accessibility and are readable by most screen readers, such as TalkBack. Text rendered in menu items is automatically provided to accessibility services. Additional content labels are optional but recommended.

For more information on content labels, go to the Android accessibility help guide.

Content descriptions

A content description can be set on <item>s in the NavigationView menu so that screen readers like TalkBack are able to announce their purpose or action, if any. This can be done in XML using the android:contentDescription attribute or programmatically with navigationView.menu.findItem(R.id.itemId)#setContentDescription (on API 26 and above).

Any ImageViews within the header layout should also have a content description set on them.

Opening and closing navigation drawers

To open navigation drawers, use clickable widgets that meet the minimum touch target size of 48dp and are properly labeled for accessibility. To close navigation drawers, consider doing the same but bear in mind that clicking on menu items or an optional scrim should also serve this purpose.

Using navigation drawers with the Navigation component

Navigation drawers can be used with the AndroidX Navigation library. For more information, go to the documentation.

Anatomy

Navigation drawers have a container, an optional header, optional dividers, items with inactive text, active text, and an active text overlay, optional subtitles, and an optional scrim.

Navigation drawer anatomy

  1. Container
  2. Header (optional)
  3. Divider (optional)
  4. Active text overlay
  5. Active text
  6. Inactive text
  7. Subtitle (optional)
  8. Scrim (optional)

Container attributes

ElementAttribute(s)Related method(s)Default value
Colorandroid:backgroundsetBackground
getBackground
?attr/colorSurface
Shapeapp:shapeAppearance
app:shapeAppearanceOverlay
N/Anull
Elevationapp:elevation (can be used on NavigationView or DrawerLayout)setElevation
getElevation
16dp (NavigationView) or 10dp (DrawerLayout)
Max widthandroid:maxWidthN/A280dp
Fits system windowsandroid:fitsSystemWindowssetFitsSystemWindows
getFitsSystemWindows
true

Header attributes

ElementAttributeRelated method(s)Default value
Layoutapp:headerLayoutaddHeaderView
inflateHeaderView
getHeaderView
getHeaderCount
removeHeaderView
null

Divider attributes

ElementAttributeRelated method(s)Default value
Dividerandroid:listDivider in app themeN/AVaries per platform version
HeightN/A (see layout)N/A1dp

Text overlay attributes

ElementAttribute(s)Related method(s)Default value
Colorapp:itemShapeFillColorN/A?attr/colorPrimary at 12% opacity (see all states)
Shapeapp:itemShapeAppearance
app:itemShapeAppearanceOverlay
N/A?attr/shapeAppearanceSmallComponent
null
Insetsapp:itemShapeInsetStart
app:itemShapeInsetTop
app:itemShapeInsetEnd
app:itemShapeInsetBottom
N/A8dp
4dp
8dp
4dp
Horizontal paddingapp:itemHorizontalPaddingsetItemHorizontalPadding
setItemHorizontalPaddingResource
getItemHorizontalPadding
22dp

Text attributes

ElementAttributeRelated method(s)Default value
Colorapp:itemTextColorsetItemTextColor
getItemTextColor
?attr/colorPrimary when active else ?attr/colorOnSurface (see all states)
Typograhphyapp:itemTextAppearancesetItemTextAppearance?attr/textAppearanceSubtitle2
Max linesapp:itemMaxLinessetItemMaxLines
getItemMaxLines
1

Icon attributes

ElementAttributeRelated method(s)Default value
Colorapp:itemIconTintsetIconItemTintList
getIconItemTintList
?attr/colorPrimary when active else ?attr/colorOnSurface (see all states)
Sizeapp:itemIconSizesetItemIconSize24dp
Paddingapp:itemIconPaddingsetItemIconPadding
setItemIconPaddingResource
getItemIconPadding
14dp

Subtitle attributes

ElementAttributeRelated method(s)Default value
Colorapp:subheaderColorN/A?android:textColorSecondary
Typographyapp:subheaderTextAppearanceN/A@style/TextAppearance.AppCompat.Body2
Max linesN/AN/A1
HeightN/AN/A?attr/listPreferredItemHeightSmall
PaddingN/AN/A?attr/listPreferredItemPaddingLeft and ?attr/listPreferredItemPaddingRight

Scrim attributes

ElementAttributeRelated method(s)Default value
ColorN/AsetScrimColor on DrawerLayoutBlack at 60% opacity

NavigationView styles

ElementStyle
Default styleWidget.MaterialComponents.NavigationView

Default style theme attribute: ?attr/navigationViewStyle

DrawerLayout styles

Default style theme attribute: ?attr/drawerLayoutStyle

Types

There are three types of navigation drawers: 1. Standard navigation drawer, 2. Modal navigation drawer, 3. Bottom navigation drawer

Standard, modal, and bottom navigation drawer examples

Standard navigation drawer

Standard navigation drawers allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.

Standard navigation drawer example

API and source code:

The following example shows a permanently visible standard navigation drawer.

Nav drawer with "Header title", "Header text", “Subtitle”, and 5 items with
heart icons on left of
screen.

In the layout:

In res/values/themes.xml:

In res/layout/header_navigation_drawer.xml:

Bottom navigation drawer

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.

These drawers open upon tapping the navigation menu icon in the bottom app bar. They are only for use on mobile.

Bottom navigation drawer example

API and source code:

The following example shows a bottom navigation drawer with a bottom app bar.

2 views: screen with bottom app bar; nav drawer covering bottom with scrim
over remaining screen.

In the layout:

In code:

For more information on bottom app bars see the documentation.

Theming

Navigation drawers support Material Theming and can be customized in terms of color, typography and shape.

API and source code:

The following example shows a navigation drawer with Material Theming.

Nav drawer with “Header”, “Header text”, “Subtitle” and 5 items: brown text
and icons, pink
containers.

Implementing navigation drawer theming

Using theme attributes, default style theme attributes, and styles in res/values/styles.xml (themes all navigation drawers and affects other components):

In res/color/navigation_item_color.xml:

In res/color/navigation_item_background_color.xml:

or using default style theme attributes, styles and theme overlays (themes all navigation drawers but does not affect other components):

or using the style in the layout (affects only this navigation drawer):

No Android implementation guidance available

Using navigation drawers

A navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.

A navigation drawer is recommended for:

  • Apps with five or more top-level destinations
  • Apps with two or more levels of navigation hierarchy
  • Quick navigation between unrelated destinations

Installation

Styles

JavaScript instantiation

For permanently visible drawer, the list must be instantiated for appropriate keyboard interaction:

Other variants use the MDCDrawer component, which will instantiate MDCList automatically:

Icons

We recommend using Material Icons from Google Fonts:

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Making navigation drawers accessible

Focus management

It is recommended to shift focus to the first focusable element in the main content when drawer is closed or one of the destination items is activated. (By default, MDC Drawer restores focus to the menu button which opened it.)

Dismissible drawer

Restore focus to the first focusable element when a list item is activated or after the drawer closes. Do not close the drawer upon item activation, since it should be up to the user when to show/hide the dismissible drawer.

Close the drawer when an item is activated in order to dismiss the modal as soon as the user performs an action. Only restore focus to the first focusable element in the main content after the drawer is closed, since it's being closed automatically.

Types

There are three types of navigation drawers: standard (1), modal (2), and bottom (3).

Standard, modal, and bottom navigation drawers

Standard navigation drawers

Standard navigation drawers allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.

Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

Note: The mdc-drawer-scrim next sibling element is required, to protect the app's UI from interactions while the modal drawer is open.

Bottom navigation drawers

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.

MDC Web does not currently support bottom navigation drawers.

Other variants

Drawer with separate list groups

Drawer with header

Drawers can contain a header element which will not scroll with the rest of the drawer content. Things like account switchers and titles should live in the header element.

Dismissible drawer

Dismissible drawers are by default hidden off screen, and can slide into view. Dismissible drawers should be used when navigation is not common, and the main app content is prioritized.

Note: Apply the mdc-drawer-app-content class to the sibling element after the drawer for the open/close animations to work.

Usage with top app bar

Dismissible drawer: full height drawer

In cases where the drawer occupies the full viewport height, some styles must be applied to get the dismissible drawer and the content below the top app bar to independently scroll and work in all browsers.

In the following example, the mdc-drawer__content and main-content elements should scroll independently of each other. The mdc-drawer--dismissible and mdc-drawer-app-content elements should then sit side-by-side. The markup looks something like this:

Dismissible drawer: below top app bar

In cases where the drawer appears below the top app bar you will want to follow the markup shown below. The mdc-drawer__content and main-content elements will also scroll independently of each other. The mdc-top-app-bar, mdc-drawer and mdc-drawer-app-content will be sibling to each other. The mdc-top-app-bar--fixed-adjust helper class will be applied to mdc-drawer and mdc-drawer-app-content elements to adjust the position with top app bar.

The CSS to match either case looks like this:

The JavaScript to toggle the drawer when the navigation button is clicked looks like this:

API

CSS classes

ClassDescription
mdc-drawerMandatory.
mdc-drawer__headerNon-scrollable element that exists at the top of the drawer.
mdc-drawer__contentScrollable content area of the drawer.
mdc-drawer__titleTitle text element of the drawer.
mdc-drawer__subtitleSubtitle text element of the drawer.
mdc-drawer--dismissibleDismissible drawer variant class.
mdc-drawer--modalModal drawer variant class.
mdc-drawer--openIf present, indicates that the dismissible drawer is in the open position.
mdc-drawer--openingApplied while the drawer is animating from the closed to the open position.
mdc-drawer--closingApplied while the drawer is animating from the open to the closed position.
mdc-drawer-app-contentMandatory for dismissible variant only. Sibling element that is resized when the drawer opens/closes.
mdc-drawer-scrimMandatory for modal variant only. Used for the overlay on the app content.

Sass mixins

MixinDescription
border-color($color)Sets border color of mdc-drawer surface.
divider-color($color)Sets divider color found between list groups.
fill-color-accessible($color)Sets the fill color to $color, and list item and icon ink colors to an accessible color relative to $color.
surface-fill-color($color)Sets the background color of mdc-drawer.
title-ink-color($color)Sets the ink color of mdc-drawer__title.
subtitle-ink-colorSets drawer subtitle and list subheader ink color.
item-icon-ink-color($color)Sets drawer list item graphic icon ink color.
item-text-ink-color($color)Sets drawer list item text ink color.
item-activated-icon-ink-color($color)Sets activated drawer list item icon ink color.
item-activated-text-ink-color($color)Sets activated drawer list item text ink color.
shape-radius($radius)Sets the rounded shape to drawer with given radius size. $radius can be single radius or list of 2 radius values for trailing-top and trailing-bottom. Automatically flips the radius values in RTL context.
item-shape-radius($radius, $rtl-reflexive)Sets the rounded shape to drawer navigation item with given radius size. Set $rtl-reflexive to true to flip radius values in RTL context, defaults to true.
activated-overlay-color($color)Sets the overlay color of the activated drawer list item.
scrim-fill-color($color)Sets the fill color of mdc-drawer-scrim.
z-index($value)Sets the z index of drawer. Drawer stays on top of top app bar except for clipped variant of drawer.
width($width)Sets the width of the drawer. In the case of the dismissible variant, also sets margin required for mdc-drawer-app-content.

MDCDrawer

Methods

SignatureDescription
emit(evtType: string, evtData: T, shouldBubble?: boolean) => voidFires a cross-browser-compatible custom event from the component root of the given type, with the given data.
listen(evtType: K, handler: SpecificEventListener<K>, options?: AddEventListenerOptions | boolean) => voidWrapper method to add an event listener to the component's root element. This is most useful when listening for custom events.
unlisten(evtType: K, handler: SpecificEventListener<K>, options?: AddEventListenerOptions | boolean) => voidWrapper method to remove an event listener to the component's root element. This is most useful when unlistening for custom events.

Properties

NameTypeDescription
openbooleanToggles the drawer open and closed.

Events

  • MDCDrawer:closed {} Emits when the navigation drawer has closed.
  • MDCDrawer:opened {} Emits when the navigation drawer has opened.

Usage within web frameworks

If you are using a JavaScript framework, such as React or Angular, you can create this component for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.

MDCDrawerAdapter

Methods

SignatureDescription
notifyOpen() => voidEmits a custom event "MDCDrawer:opened" denoting the drawer has opened.
addClass(className: string) => voidAdds a class to the root Element.
focusActiveNavigationItem() => voidFocuses the active / selected navigation item.
hasClass(className: string) => booleanReturns true if the root Element contains the given class.
notifyClose() => voidEmits a custom event "MDCDrawer:closed" denoting the drawer has closed.
elementHasClass(element: Element, className: string) => booleanReturns true if the element contains the given class.
releaseFocus() => voidReleases focus trap from root element which was set by trapFocus and restores focus to where it was prior to calling trapFocus.
removeClass(className: string) => voidRemoves a class from the root Element.
restoreFocus() => voidRestores focus to element previously saved with 'saveFocus'.
saveFocus() => voidSaves the focus of currently active element.
trapFocus() => voidTraps focus on root element and focuses the active navigation element.

MDCDismissibleDrawerFoundation

Methods

SignatureDescription
close() => voidCloses the drawer from the open state.
handleKeydown(evt: KeyboardEvent) => voidKeydown handler to close drawer when key is escape.
handleTransitionEnd(evt: TransitionEvent) => voidHandles the transitionend event when the drawer finishes opening/closing.
closed_() => voidExtension point for when drawer finishes close animation.
isClosing() => booleanReturns true if the drawer is animating closed.
isOpen() => booleanReturns true if the drawer is in the open position.
isOpening() => booleanReturns true if the drawer is animating open.
open() => voidOpens the drawer from the closed state.
opened_() => voidExtension point for when drawer finishes open animation.

MDCModalDrawerFoundation

Methods

SignatureDescription
close() => voidCloses the drawer from the open state.
handleKeydown(evt: KeyboardEvent) => voidKeydown handler to close drawer when key is escape.
handleScrimClick() => voidHandles click event on scrim.
handleTransitionEnd(evt: TransitionEvent) => voidHandles the transitionend event when the drawer finishes opening/closing.
closed_() => voidCalled when drawer finishes close animation.
isClosing() => booleanReturns true if the drawer is animating closed.
isOpen() => booleanReturns true if the drawer is in the open position.
isOpening() => booleanReturns true if the drawer is animating open.
open() => voidOpens the drawer from the closed state.
opened_() => voidCalled when drawer finishes open animation.
No Web implementation guidance available

Using a navigation drawer

A navigation drawer provides access to destinations and app functionality, such as switching accounts. It can either be permanently on-screen or controlled by a navigation menu icon.

A navigation drawer is recommended for:

  • Apps with five or more top-level destinations
  • Apps with two or more levels of navigation hierarchy
  • Quick navigation between unrelated destinations

Before you can use a Material navigation rail, you need to import the Material Components package for Flutter: package:flutter/material.dart.

You need to use a MaterialApp.

To create a modal drawer in Flutter, create a Drawer and set it to the Scaffold's drawer property.

The child of the drawer can be a ListView or a Container wrapping a ListView. The children of the ListView can consist of a DrawerHeader and ListTiles.

There are no explicit bottom or standard drawers in Flutter. See the Types section for instructions to generate these drawer types specified in the Material navigation drawer spec

Making navigation drawers accessible

Flutter's drawer component APIs support labeling for accessibility via the semanticLabel property. The content within child can have additional accessibility labeling.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Anatomy

The following is a navigation drawer anatomy diagram:

Navigation drawer anatomy

  1. Container
  2. Header (optional)
  3. Divider (optional)
  4. Active text overlay
  5. Active text
  6. Inactive text
  7. Subtitle
  8. Scrim (modal only)

Container attributes

 Property
Colorcolor on the child of the Drawer when using a Container
Heightheight on the child of the Drawer when using a Container

Header attributes

 Property
Text labelText value on child of the DrawerHeader when using a Text
Colorstyle on child of the DrawerHeader when using a Text
Typographystyle on child of the DrawerHeader when using a Text

Divider attributes

 Property
ColorWithin the Divider widget use the color parameter
HeightWithin the Divider widget use the height parameter
IndentWithin the Divider widget use the indent parameter
End IndentWithin the Divider widget use the endIndent parameter
ThicknessWithin the Divider widget use the thickness parameter

Active text overlay attributes

 Property
ColorWithin the ListTile widget use the selectedTileColor parameter

Active text attributes

 Property
Text labelstyle on title of the ListTile when using a Text when the selected parameter of the ListTile is true
Colorstyle on title of the ListTile when using a Text when the selected parameter of the ListTile is true
Typographystyle on title of the ListTile when using a Text when the selected parameter of the ListTile is true

Inactive text attributes

 Property
Text labelstyle on title of the ListTile when using a Text when the selected parameter of the ListTile is false
Colorstyle on title of the ListTile when using a Text when the selected parameter of the ListTile is false
Typographystyle on title of the ListTile when using a Text when the selected parameter of the ListTile is false

Subtitle attributes

 Property
Text labelstyle on subtitle of the ListTile when using a Text
Colorstyle on subtitle of the ListTile when using a Text
Typographystyle on subtitle of the ListTile when using a Text

Scrim attributes

 Property
ColorWithin the Scaffold widget use the drawerScrimColor parameter

Types

There are three types of navigation drawer, which include 1. standard 2. modal 3. bottom

Standard, modal, and bottom navigation drawer examples

Standard navigation drawer

Standard navigation drawers allow interaction with both screen content and the drawer at the same time. They can be used on tablet and desktop, but they aren’t suitable for mobile due to limited screen size.

Drawer

Standard navigation drawer example

NOTE: There is no explicit standard drawer in Flutter but it can be built using a Row that contains a Container and a Scaffold, with the Container acting as a drawer.

Bottom navigation drawer

Bottom navigation drawers are modal drawers that are anchored to the bottom of the screen instead of the left or right edge. They are only used with bottom app bars.

Bottom navigation drawer example

**
NOTE: There is no bottom drawer in Flutter, but it can be created by creating custom Widget composed of ListTile, Divider, and Text widgets. A PositionedTransition can be used to animate the visibility of the drawer. The opening and closing of the drawer should be triggered by the tap of a menu icon within a BottomAppBar in the bottomNavigationBar slot in the Scaffold.
**

For a more complete bottom drawer implementation, see this example from the Flutter Gallery.

Theming a navigation drawer

Theming for a navigation drawer can be done by theming the widgets that are inside the Drawer.

  • The widget used for a drawer destination is commonly a ListTile, and can be themed with ListTileTheme.
  • Other Texts and Icons can be themed with TextTheme and IconTheme.

In the Modal navigation drawer above, the colors of the active destinations are based off the ThemeData.primaryColor.

No Flutter implementation guidance available

Using navigation drawers

Installing

Add the following to your Podfile:

Then, run the following command:

Importing

From there, import the relevant target or file.

Swift

Objective-C

Making navigation drawers accessible

While MDCBottomDrawerViewController supports the accessibility escape "Z" gesture, it is advisible that the content view controller provides its own dismiss action affordance. Note that it is the responsibility of the header and content view controllers to implement any custom accessibility behavior.

Bottom navigation drawer

Both bottom navigation drawers and side navigation drawers exist, but we only offer a bottom navigation drawer implementation.

Our bottom navigation drawer implementation is centered around MDCBottomDrawerViewController, a UIViewController subclass. MDCBottomDrawerViewController has a contentViewController property, whose view is displayed as the primary content of the drawer, as well as a headerViewController property, whose view is positioned above the content view controller and sticks to the top when the drawer is full-screen. For more information on implementing custom view controller classes see Apple's View Controller Programming Guide.

Bottom navigation drawers are recommended for:

  • Apps with five or more top-level destinations.
  • Apps with two or more levels of navigation hierarchy.
  • Quick navigation between unrelated destinations.

MDCBottomDrawerViewController presentation makes use of the UIPresentationController subclass MDCBottomDrawerPresentationController, as well as MDCBottomDrawerTransitionController, which conforms to UIViewControllerTransitioningDelegate.

If the primary content displayed in a bottom drawer is a UITableView or UICollectionView, specifically one that fills the content area, we recommend setting it as the trackingScrollView property for more performant scrolling.

It is important that the view controller used as the headerViewController conforms to the MDCBottomDrawerHeader protocol, which implements the method -updateDrawerHeaderTransitionRatio:. This method provides transitionToTopRatio, a CGFloat that moves between 0 to 1 as the header view transitions from being positioned above the content to being sticky at the top of the screen. The transition begins as the header view begins to cover the status bar and safe area and ends once the header has reached the top of the screen.

Example using the MDCBottomDrawerViewController with/without a header

Swift

Objective-C

Example presenting a drawer without a header

Swift

Objective-C

Example using trackingScrollView

Swift

Objective-C

Theming

While MDCBottomDrawerViewController does have a theming extension, it should not be relied on for ensuring the content and header are themed correctly. It only sets properties like corner radius, scrim color, and handle color. To display sufficiently themed content with MDCBottomDrawerViewController you must make sure the content and header view controllers are themed independently.

To make use of the bottom drawer theming extension you need to install it wth Cocoapods. First, add the following line to your Podfile:

Then run the installer:

Next, import the theming target, and call the correct theming method.

Swift

Objective-C

No iOS implementation guidance available

Up next