NavigationDrawerScope

@ExperimentalTvMaterial3Api
interface NavigationDrawerScope

NavigationDrawerScope is used to provide the doesNavigationDrawerHaveFocus state to the NavigationDrawerItem composable

Summary

Public properties
Boolean

Whether any item within the NavigationDrawer or ModalNavigationDrawer is focused

Extension functions
Unit
@ExperimentalTvMaterial3Api
@Composable
NavigationDrawerScope.NavigationDrawerItem(
    selected: Boolean,
    onClick: () -> Unit,
    leadingContent: @Composable () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    tonalElevation: Dp,
    shape: NavigationDrawerItemShape,
    colors: NavigationDrawerItemColors,
    scale: NavigationDrawerItemScale,
    border: NavigationDrawerItemBorder,
    glow: NavigationDrawerItemGlow,
    interactionSource: MutableInteractionSource,
    content: @Composable () -> Unit
)

TV Material Design navigation drawer item.

Public properties

hasFocus

Added in 1.0.0-alpha10
val hasFocus: Boolean

Whether any item within the NavigationDrawer or ModalNavigationDrawer is focused

Extension functions

NavigationDrawerItem

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
): Unit

TV Material Design navigation drawer item.

A NavigationDrawerItem represents a destination within drawers, either NavigationDrawer or ModalNavigationDrawer

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

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")
    }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.ModalNavigationDrawer
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

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")
    }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.ModalNavigationDrawer
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

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")
    }
}
Parameters
selected: Boolean

defines whether this composable is selected or not
onClick: () -> Unit

called when this composable is clicked
leadingContent: @Composable () -> Unit

the leading content of the list item
modifier: Modifier = Modifier

to be applied to the list item
enabled: Boolean = true

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: (() -> Unit)? = null

called when this composable is long clicked (long-pressed)
supportingContent: (@Composable () -> Unit)? = null

the content displayed below the headline content
trailingContent: (@Composable () -> Unit)? = null

the trailing meta badge or icon
tonalElevation: Dp = NavigationDrawerItemDefaults.NavigationDrawerItemElevation

the tonal elevation of this composable
shape: NavigationDrawerItemShape = NavigationDrawerItemDefaults.shape()

defines the shape of Composable's container in different interaction states
colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors()

defines the background and content colors used in the composable for different interaction states
scale: NavigationDrawerItemScale = NavigationDrawerItemScale.None

defines the size of the composable relative to its original size in different interaction states
border: NavigationDrawerItemBorder = NavigationDrawerItemDefaults.border()

defines a border around the composable in different interaction states
glow: NavigationDrawerItemGlow = NavigationDrawerItemDefaults.glow()

defines a shadow to be shown behind the composable for different interaction states
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

the MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this composable in different states
content: @Composable () -> Unit

main content of this composable