# NavigationDrawerScope # NavigationDrawerScope Artifact:[androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/NavigationDrawerScope.kt+class:androidx.tv.material3.NavigationDrawerScope) Added in[1.0.0](https://developer.android.com/jetpack/androidx/releases/tv#1.0.0)
``` interface NavigationDrawerScope ```
*** ** * ** *** [NavigationDrawerScope](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerScope)is used to provide the doesNavigationDrawerHaveFocus state to the[NavigationDrawerItem](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#(androidx.tv.material3.NavigationDrawerScope).NavigationDrawerItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.NavigationDrawerItemShape,androidx.tv.material3.NavigationDrawerItemColors,androidx.tv.material3.NavigationDrawerItemScale,androidx.tv.material3.NavigationDrawerItemBorder,androidx.tv.material3.NavigationDrawerItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0))composable ## Summary | ### Public properties | |-------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | [Boolean](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) | [hasFocus](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerScope#hasFocus()) Whether any item within the[NavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0))or[ModalNavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0))is focused | | ### Extension functions | |-------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | [Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html) | `@`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable) [NavigationDrawerScope](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerScope)`.`[NavigationDrawerItem](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerScope#(androidx.tv.material3.NavigationDrawerScope).NavigationDrawerItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.NavigationDrawerItemShape,androidx.tv.material3.NavigationDrawerItemColors,androidx.tv.material3.NavigationDrawerItemScale,androidx.tv.material3.NavigationDrawerItemBorder,androidx.tv.material3.NavigationDrawerItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0))`(` ` selected: `[Boolean](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)`,` ` onClick: () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`,` ` leadingContent: @`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`,` ` modifier: `[Modifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)`,` ` enabled: `[Boolean](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)`,` ` onLongClick: (() `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`)?,` ` supportingContent: (@`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`)?,` ` trailingContent: (@`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`)?,` ` tonalElevation: `[Dp](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)`,` ` shape: `[NavigationDrawerItemShape](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemShape)`,` ` colors: `[NavigationDrawerItemColors](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemColors)`,` ` scale: `[NavigationDrawerItemScale](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemScale)`,` ` border: `[NavigationDrawerItemBorder](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemBorder)`,` ` glow: `[NavigationDrawerItemGlow](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemGlow)`,` ` interactionSource: `[MutableInteractionSource](https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource)`?,` ` content: @`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html) `)` TV Material Design navigation drawer item. | ## Public properties ### hasFocus Added in[1.0.0](https://developer.android.com/jetpack/androidx/releases/tv#1.0.0) ``` val hasFocus: Boolean ``` Whether any item within the[NavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0))or[ModalNavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0))is focused ## Extension functions ### NavigationDrawerItem Artifact:[androidx.tv:tv-material](https://developer.android.com/jetpack/androidx/releases/tv) [View Source](https://cs.android.com/search?q=file:androidx/tv/material3/NavigationDrawerItem.kt+function: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](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#(androidx.tv.material3.NavigationDrawerScope).NavigationDrawerItem(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.unit.Dp,androidx.tv.material3.NavigationDrawerItemShape,androidx.tv.material3.NavigationDrawerItemColors,androidx.tv.material3.NavigationDrawerItemScale,androidx.tv.material3.NavigationDrawerItemBorder,androidx.tv.material3.NavigationDrawerItemGlow,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0))represents a destination within drawers, either[NavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#NavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,kotlin.Function0))or[ModalNavigationDrawer](https://developer.android.com/reference/kotlin/androidx/tv/material3/package-summary#ModalNavigationDrawer(kotlin.Function2,androidx.compose.ui.Modifier,androidx.tv.material3.DrawerState,androidx.compose.ui.graphics.Brush,kotlin.Function0)) ```kotlin 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") } } ``` ```kotlin 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") } } ``` ```kotlin 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](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html) | defines whether this composable is selected or not | | `onClick: () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html) | called when this composable is clicked | | `leadingContent: @`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html) | the leading content of the list item | | `modifier: `[Modifier](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier)` = Modifier` | to be applied to the list item | | `enabled: `[Boolean](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html)` = 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](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`)? = null` | called when this composable is long clicked (long-pressed) | | `supportingContent: (@`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`)? = null` | the content displayed below the headline content | | `trailingContent: (@`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)`)? = null` | the trailing meta badge or icon | | `tonalElevation: `[Dp](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` = NavigationDrawerItemDefaults.NavigationDrawerItemElevation` | the tonal elevation of this composable | | `shape: `[NavigationDrawerItemShape](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemShape)` = NavigationDrawerItemDefaults.shape()` | defines the shape of Composable's container in different interaction states | | `colors: `[NavigationDrawerItemColors](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemColors)` = NavigationDrawerItemDefaults.colors()` | defines the background and content colors used in the composable for different interaction states | | `scale: `[NavigationDrawerItemScale](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemScale)` = NavigationDrawerItemScale.None` | defines the size of the composable relative to its original size in different interaction states | | `border: `[NavigationDrawerItemBorder](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemBorder)` = NavigationDrawerItemDefaults.border()` | defines a border around the composable in different interaction states | | `glow: `[NavigationDrawerItemGlow](https://developer.android.com/reference/kotlin/androidx/tv/material3/NavigationDrawerItemGlow)` = NavigationDrawerItemDefaults.glow()` | defines a shadow to be shown behind the composable for different interaction states | | `interactionSource: `[MutableInteractionSource](https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource)`? = null` | an optional hoisted[MutableInteractionSource](https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource)for observing and emitting[Interaction](https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/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: @`[Composable](https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable)` () `->` `[Unit](https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html) | main content of this composable |