NavigationDrawerScope

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
@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
val hasFocus: Boolean

Whether any item within the NavigationDrawer or ModalNavigationDrawer is focused

Extension functions

NavigationDrawerItem

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

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: @Composable () -> Unit

main content of this composable