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

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



TV Material Design navigation drawer item.

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

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


```kotlin
@Composable
fun NavigationDrawerScope.NavigationDrawerItem(
    selected: Boolean,
    onClick: () -> Unit,
    leadingContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    tonalElevation: Dp = NavigationDrawerItemDefaults.NavigationDrawerItemElevation,
    shape: NavigationDrawerItemShape = NavigationDrawerItemDefaults.shape(),
    colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors(),
    scale: NavigationDrawerItemScale = NavigationDrawerItemScale.None,
    border: NavigationDrawerItemBorder = NavigationDrawerItemDefaults.border(),
    glow: NavigationDrawerItemGlow = NavigationDrawerItemDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| selected | defines whether this composable is selected or not |
| onClick | called when this composable is clicked |
| leadingContent | the leading content of the list item |
| modifier | to be applied to the list item |
| enabled | controls the enabled state of this composable. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services |
| onLongClick | called when this composable is long clicked (long-pressed) |
| supportingContent | the content displayed below the headline content |
| trailingContent | the trailing meta badge or icon |
| tonalElevation | the tonal elevation of this composable |
| shape | defines the shape of Composable's container in different interaction states |
| colors | defines the background and content colors used in the composable for different interaction states |
| scale | defines the size of the composable relative to its original size in different interaction states |
| border | defines a border around the composable in different interaction states |
| glow | defines a shadow to be shown behind the composable for different interaction states |
| interactionSource | an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this composable. You can use this to change the composable's appearance or preview the composable in different states. Note that if `null` is provided, interactions will still happen internally. |
| content | main content of this composable |






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