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 hasFocusBoolean

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