# Navigation drawer [Navigation drawers](https://material.io/components/navigation-drawer) provide access to destinations in your app.  **Contents** * [Using navigation drawers](#using-navigation-drawers) * [Anatomy](#anatomy) * [Standard navigation drawers](#standard-navigation-drawers) * [Modal navigation drawers](#modal-navigation-drawers) * [Bottom navigation drawers](#bottom-navigation-drawers) * [Theming](#theming) ## 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](https://github.com/material-components/material-components-android/tree/master/docs/getting-started.md) page. For modal navigation drawers you also need to add a dependency to tne AndroidX `DrawerLayout` library. For more information go to the [releases](https://developer.android.com/jetpack/androidx/releases/drawerlayout) page. The content of all navigation drawer types can be implemented using a `NavigationView`. ```xml ``` _**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  In the layout: ```xml ``` In `res/menu/navigation_drawer.xml`: ```xml ``` ### Adding a header  In the layout: ```xml ``` In `res/layout/header_navigation_drawer.xml`: ```xml ``` ### Adding dividers and subtitles  Dividers are automatically added between ``s with unique IDs. When a sub-`` is added to an item it is treated as a subtitle. In `res/menu/navigation_drawer.xml`: ```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](https://support.google.com/accessibility/android/answer/7158690). #### Content descriptions A content description can be set on ``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 `ImageView`s 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](https://developer.android.com/guide/navigation/navigation-ui#add_a_navigation_drawer). ## 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.  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 Element | Attribute(s) | Related method(s) | Default value ----------------------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------- **Color** | `android:background` | `setBackground`
`getBackground` | `?attr/colorSurface` **Shape** | `app:shapeAppearance`
`app:shapeAppearanceOverlay` | N/A | `null` **Elevation** | `app:elevation` (can be used on `NavigationView` or `DrawerLayout`) | `setElevation`
`getElevation` | `16dp` (`NavigationView`) or `10dp` (`DrawerLayout`) **Max width** | `android:maxWidth` | N/A | `280dp` **Fits system windows** | `android:fitsSystemWindows` | `setFitsSystemWindows`
`getFitsSystemWindows` | `true` ### Header attributes Element | Attribute | Related method(s) | Default value ---------- | ------------------ | --------------------------------------------------------------------------------------------------- | ------------- **Layout** | `app:headerLayout` | `addHeaderView`
`inflateHeaderView`
`getHeaderView`
`getHeaderCount`
`removeHeaderView` | `null` ### Divider attributes Element | Attribute | Related method(s) | Default value ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------- **Divider** | `android:listDivider` in app theme | N/A | Varies per platform version **Height** | N/A (see [layout](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/internal/res/layout/design_navigation_item_separator.xml)) | N/A | `1dp` ### Text overlay attributes Element | Attribute(s) | Related method(s) | Default value ---------------------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------- **Color** | `app:itemShapeFillColor` | N/A | `?attr/colorPrimary` at 12% opacity (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/mtrl_navigation_item_background_color.xml)) **Shape** | `app:itemShapeAppearance`
`app:itemShapeAppearanceOverlay` | N/A | `?attr/shapeAppearanceSmallComponent`
`null` **Insets** | `app:itemShapeInsetStart`
`app:itemShapeInsetTop`
`app:itemShapeInsetEnd`
`app:itemShapeInsetBottom` | N/A | `8dp`
`4dp`
`8dp`
`4dp` **Horizontal padding** | `app:itemHorizontalPadding` | `setItemHorizontalPadding`
`setItemHorizontalPaddingResource`
`getItemHorizontalPadding` | `22dp` ### Text attributes Element | Attribute | Related method(s) | Default value --------------- | ------------------------ | ---------------------------------------- | ------------- **Color** | `app:itemTextColor` | `setItemTextColor`
`getItemTextColor` | `?attr/colorPrimary` when active else `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/mtrl_navigation_item_text_color.xml)) **Typograhphy** | `app:itemTextAppearance` | `setItemTextAppearance` | `?attr/textAppearanceSubtitle2` **Max lines** | `app:itemMaxLines` | `setItemMaxLines`
`getItemMaxLines` | `1` ### Icon attributes Element | Attribute | Related method(s) | Default value ----------- | --------------------- | ---------------------------------------------------------------------------- | ------------- **Color** | `app:itemIconTint` | `setIconItemTintList`
`getIconItemTintList` | `?attr/colorPrimary` when active else `?attr/colorOnSurface` (see all [states](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/res/color/mtrl_navigation_item_icon_tint.xml)) **Size** | `app:itemIconSize` | `setItemIconSize` | `24dp` **Padding** | `app:itemIconPadding` | `setItemIconPadding`
`setItemIconPaddingResource`
`getItemIconPadding` | `14dp` ### Subtitle attributes Element | Attribute | Related method(s) | Default value -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------- **Color** | N/A (see [layout](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/internal/res/layout/design_navigation_item_subheader.xml)) | N/A | `?android:textColorSecondary` **Typography** | N/A | N/A | `@style/TextAppearance.AppCompat.Body2` **Max lines** | N/A | N/A | `1` **Height** | N/A | N/A | `?attr/listPreferredItemHeightSmall` **Padding** | N/A | N/A | `?attr/listPreferredItemPaddingLeft` and `?attr/listPreferredItemPaddingRight` ### Scrim attributes Element | Attribute | Related method(s) | Default value --------- | --------- | --------------------------------- | -------------------- **Color** | N/A | `setScrimColor` on `DrawerLayout` | Black at 60% opacity ### `NavigationView` styles Element | Style ----------------- | ------------------------------------------ **Default style** | `Widget.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](#standard-navigation-drawer), 2\. [Modal navigation drawer](#modal-navigation-drawer), 3\. [Bottom navigation drawer](#bottom-navigation-drawer)  ## Standard navigation drawer [Standard navigation drawers](https://material.io/components/navigation-drawer#standard-drawer) 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: * `NavigationView` * [Class definition](https://developer.android.com/reference/com/google/android/material/navigation/NavigationView) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/NavigationView.java) The following example shows a permanently visible standard navigation drawer.  In the layout: ```xml ``` In `res/values/themes.xml`: ```xml ``` In `res/layout/header_navigation_drawer.xml`: ```xml ... ``` ## Modal navigation drawer [Modal navigation drawers](https://material.io/components/navigation-drawer#modal-drawer) 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. ### Modal navigation drawer example API and source code: * `NavigationView` * [Class definition](https://developer.android.com/reference/com/google/android/material/navigation/NavigationView) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/NavigationView.java) * `DrawerLayout` * [Class definition](https://developer.android.com/reference/kotlin/androidx/drawerlayout/widget/DrawerLayout) The following example shows a modal navigation drawer with a top app bar.  In the layout: ```xml ``` In `res/values/themes.xml`: ```xml ``` In `res/layout/header_navigation_drawer.xml`: ```xml ... ``` In code: ```kt topAppBar.setNavigationOnClickListener { drawerLayout.open() } navigationView.setNavigationItemSelectedListener { menuItem -> // Handle menu item selected menuItem.isChecked = true drawerLayout.close() true } ``` For more information on top app bars see the [documentation](https://github.com/material-components/material-components-android/tree/master/docs/components/TopAppBar.md). ## Bottom navigation drawer [Bottom navigation drawers](https://material.io/components/navigation-drawer#bottom-drawer) 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: * `NavigationView` * [Class definition](https://developer.android.com/reference/com/google/android/material/navigation/NavigationView) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/NavigationView.java) * `BottomSheetBehavior` * [Class definition](https://developer.android.com/reference/com/google/android/material/bottomsheet/BottomSheetBehavior) * [Class source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/bottomsheet/BottomSheetBehavior.java) The following example shows a bottom navigation drawer with a bottom app bar.  In the layout: ```xml ``` In code: ```kt val bottomSheetBehavior = BottomSheetBehavior.from(navigationView) bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN bottomAppBar.setNavigationOnClickListener { bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED } navigationView.setNavigationItemSelectedListener { menuItem -> // Handle menu item selected menuItem.isChecked = true bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN true } scrim.setOnClickListener { bottomSheetBehavior.state = BottomSheetBehavior.STATE_HIDDEN } bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { override fun onSlide(bottomSheet: View, slideOffset: Float) { val baseColor = Color.BLACK // 60% opacity val baseAlpha = ResourcesCompat.getFloat(resources, R.dimen.material_emphasis_medium) // Map slideOffset from [-1.0, 1.0] to [0.0, 1.0] val offset = (slideOffset - (-1f)) / (1f - (-1f)) * (1f - 0f) + 0f val alpha = MathUtils.lerp(0f, 255f, offset * baseAlpha).toInt() val color = Color.argb(alpha, baseColor.red, baseColor.green, baseColor.blue) scrim.setBackgroundColor(color) } override fun onStateChanged(bottomSheet: View, newState: Int) { } }) ``` For more information on bottom app bars see the [documentation](https://github.com/material-components/material-components-android/tree/master/docs/components/BottomAppBar.md). ## Theming Navigation drawers support [Material Theming](https://material.io/components/text-fields/#theming) and can be customized in terms of color, typography and shape. ### Navigation drawer theming example API and source code: * `NavigationView` * [Class definition](https://developer.android.com/reference/com/google/android/material/navigation/NavigationView) * [GitHub source](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/navigation/NavigationView.java) The following example shows a navigation drawer with Material Theming.  #### 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): ```xml ``` In `res/color/navigation_item_color.xml`: ```xml ``` In `res/color/navigation_item_background_color.xml`: ```xml ``` or using default style theme attributes, styles and theme overlays (themes all navigation drawers but does not affect other components): ```xml ``` or using the style in the layout (affects only this navigation drawer): ```xml ```