---
title: "NavigationDrawerItem"
description: "Material Design navigation drawer item."
type: "component"
---

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



Material Design navigation drawer item.

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

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


```kotlin
@Composable
fun NavigationDrawerItem(
    label: @Composable () -> Unit,
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    icon: (@Composable () -> Unit)? = null,
    badge: (@Composable () -> Unit)? = null,
    shape: Shape = NavigationDrawerTokens.ActiveIndicatorShape.value,
    colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
)
```


#### Parameters

| | |
| --- | --- |
| label | text label for this item |
| selected | whether this item is selected |
| onClick | called when this item is clicked |
| modifier | the `Modifier` to be applied to this item |
| icon | optional icon for this item, typically an `Icon` |
| badge | optional badge to show on this item from the end side |
| shape | optional shape for the active indicator |
| colors | `NavigationDrawerItemColors` that will be used to resolve the colors used for this item in different states. See `NavigationDrawerItemDefaults.colors`. |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this item. You can use this to change the item's appearance or preview the item in different states. Note that if `null` is provided, interactions will still happen internally. |






## 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()
        }
    }
}
```