---
title: "NavigationDrawer"
description: "Navigation drawers provide ergonomic access to destinations in an app. They’re often next to app
content and affect the screen’s layout grid. Standard navigation drawers are good for frequent
switching to different destinations."
type: "component"
---

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



Navigation drawers provide ergonomic access to destinations in an app. They’re often next to app
content and affect the screen’s layout grid. Standard navigation drawers are good for frequent
switching to different destinations.

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

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


```kotlin
@Composable
fun NavigationDrawer(
    drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    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 |
| content | content of the rest of the UI |






## Code Examples
### SampleNavigationDrawer
```kotlin
@Composable
fun SampleNavigationDrawer() {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val items =
        listOf(
            "Home" to Icons.Default.Home,
            "Settings" to Icons.Default.Settings,
            "Favourites" to Icons.Default.Favorite,
        )
    NavigationDrawer(
        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.height(100.dp).fillMaxWidth(), onClick = {}) { Text("BUTTON") }
    }
}
```