---
title: "ModalNavigationDrawer"
description: "Navigation drawers provide ergonomic access to destinations in an app. Modal navigation drawers
are good for infrequent, but more focused, switching to different destinations."
type: "component"
---

<div class='type'>Composable Component</div>



Navigation drawers provide ergonomic access to destinations in an app. Modal navigation drawers
are good for infrequent, but more focused, switching to different destinations.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
fun ModalNavigationDrawer(
    drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    scrimBrush: Brush = SolidColor(LocalColorScheme.current.scrim.copy(alpha = 0.5f)),
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| drawerContent | Content that needs to be displayed on the drawer based on whether the drawer is `DrawerValue.Open` or `DrawerValue.Closed`. Drawer-entries can be animated when the drawer moves from Closed to Open state and vice-versa. For, e.g., the entry could show only an icon in the Closed state and slide in text to form (icon + text) when in the Open state. |
| modifier | the `Modifier` to be applied to this drawer |
| drawerState | state of the drawer |
| scrimBrush | brush to paint the scrim that obscures content when the drawer is open |
| content | content of the rest of the UI. The content extends to the edge of the container under the modal navigation drawer. Focusable content that is not part of the background must have start-padding sufficient to prevent it from being drawn under the drawer in the Closed state. |






## Code Examples
### SampleModalNavigationDrawerWithGradientScrim
```kotlin
@Composable
fun SampleModalNavigationDrawerWithGradientScrim() {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val items =
        listOf(
            "Home" to Icons.Default.Home,
            "Settings" to Icons.Default.Settings,
            "Favourites" to Icons.Default.Favorite,
        )
    val closeDrawerWidth = 80.dp
    val backgroundContentPadding = 10.dp
    ModalNavigationDrawer(
        drawerContent = {
            Column(
                Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
                horizontalAlignment = Alignment.Start,
                verticalArrangement = Arrangement.spacedBy(10.dp),
            ) {
                items.forEachIndexed { index, item ->
                    val (text, icon) = item
                    NavigationDrawerItem(
                        selected = selectedIndex == index,
                        onClick = { selectedIndex = index },
                        leadingContent = { Icon(imageVector = icon, contentDescription = null) },
                    ) {
                        Text(text)
                    }
                }
            }
        },
        scrimBrush = Brush.horizontalGradient(listOf(Color.DarkGray, Color.Transparent)),
    ) {
        Button(
            modifier =
                Modifier.padding(closeDrawerWidth + backgroundContentPadding)
                    .height(100.dp)
                    .fillMaxWidth(),
            onClick = {},
        ) {
            Text("BUTTON")
        }
    }
}
```
### SampleModalNavigationDrawerWithSolidScrim
```kotlin
@Composable
fun SampleModalNavigationDrawerWithSolidScrim() {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val items =
        listOf(
            "Home" to Icons.Default.Home,
            "Settings" to Icons.Default.Settings,
            "Favourites" to Icons.Default.Favorite,
        )
    val closeDrawerWidth = 80.dp
    val backgroundContentPadding = 10.dp
    ModalNavigationDrawer(
        drawerContent = {
            Column(
                Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
                horizontalAlignment = Alignment.Start,
                verticalArrangement = Arrangement.spacedBy(10.dp),
            ) {
                items.forEachIndexed { index, item ->
                    val (text, icon) = item
                    NavigationDrawerItem(
                        selected = selectedIndex == index,
                        onClick = { selectedIndex = index },
                        leadingContent = { Icon(imageVector = icon, contentDescription = null) },
                    ) {
                        Text(text)
                    }
                }
            }
        }
    ) {
        Button(
            modifier =
                Modifier.padding(closeDrawerWidth + backgroundContentPadding)
                    .height(100.dp)
                    .fillMaxWidth(),
            onClick = {},
        ) {
            Text("BUTTON")
        }
    }
}
```