State of Compose 2023 results are in! Click here to learn more

← Back to Tv Material

NavigationDrawerItem

Component
in
Tv Material
. Since 1.0.0-alpha10

Overview

Code Examples

Video

TV Material Design navigation drawer item.

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

Overloads

@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,
)

Parameters

NameDescription
selecteddefines whether this composable is selected or not
onClickcalled when this composable is clicked
leadingContentthe leading content of the list item
modifierto be applied to the list item
enabledcontrols 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
onLongClickcalled when this composable is long clicked (long-pressed)
supportingContentthe content displayed below the headline content
trailingContentthe trailing meta badge or icon
tonalElevationthe tonal elevation of this composable
shapedefines the shape of Composable's container in different interaction states
colorsdefines the background and content colors used in the composable for different interaction states
scaledefines the size of the composable relative to its original size in different interaction states
borderdefines a border around the composable in different interaction states
glowdefines a shadow to be shown behind the composable for different interaction states
interactionSourcethe 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
contentmain content of this composabl