NavigationDrawerItem

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 Interactions 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") }
    }
}
View all →
View all →