NavigationDrawerItem

Composable Component

TV Material Design navigation drawer item.

Android

@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

@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

@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

@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") }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled