---
title: "ModalNavigationDrawer"
description: "Navigation drawers provide ergonomic access to destinations in an app."
type: "component"
social_image: "/static/images/material3/navigation-drawer.png"
---

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



Navigation drawers provide ergonomic access to destinations in an app.

<img loading='lazy' class='hero-img' alt='Navigation drawer image' src='/static/images/material3/navigation-drawer.png'>

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

<div class='sourceset sourceset-common'>Common</div>


```kotlin
@Composable
fun ModalNavigationDrawer(
    drawerContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| drawerContent | content inside this drawer |
| modifier | the `Modifier` to be applied to this drawer |
| drawerState | state of the drawer |
| gesturesEnabled | whether or not the drawer can be interacted by gestures |
| scrimColor | color of the scrim that obscures content when the drawer is open |
| content | content of the rest of the UI |






## Code Examples
### ModalNavigationDrawerSample
```kotlin
@Preview
@Composable
fun ModalNavigationDrawerSample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val focusRequester = remember { FocusRequester() }
    // icons to mimic drawer destinations
    val items =
        listOf(
            Icons.Default.AccountCircle,
            Icons.Default.Bookmarks,
            Icons.Default.CalendarMonth,
            Icons.Default.Dashboard,
            Icons.Default.Email,
            Icons.Default.Favorite,
            Icons.Default.Group,
            Icons.Default.Headphones,
            Icons.Default.Image,
            Icons.Default.JoinFull,
            Icons.Default.Keyboard,
            Icons.Default.Laptop,
            Icons.Default.Map,
            Icons.Default.Navigation,
            Icons.Default.Outbox,
            Icons.Default.PushPin,
            Icons.Default.QrCode,
            Icons.Default.Radio,
        )
    val selectedItem = remember { mutableStateOf(items[0]) }
    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet(drawerState) {
                Column(Modifier.verticalScroll(rememberScrollState())) {
                    Spacer(Modifier.height(12.dp))
                    items.forEach { item ->
                        NavigationDrawerItem(
                            icon = { Icon(item, contentDescription = null) },
                            label = { Text(item.name.substringAfterLast(".")) },
                            selected = item == selectedItem.value,
                            onClick = {
                                scope.launch { drawerState.close() }
                                selectedItem.value = item
                            },
                            modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding),
                        )
                    }
                }
            }
        },
        content = {
            Column(
                modifier = Modifier.fillMaxSize().padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
                Spacer(Modifier.height(20.dp))
                Button(
                    modifier = Modifier.focusRequester(focusRequester),
                    onClick = { scope.launch { drawerState.open() } },
                ) {
                    Text("Click to open")
                }
            }
        },
    )
    LaunchedEffect(drawerState.isClosed) {
        if (drawerState.isClosed) {
            // Keyboard focus should go back to button once drawer closes.
            focusRequester.requestFocus()
        }
    }
}
```