We just launched Compose Examples featuring over 150+ components! Check it out →

NavigationRailItem

Common

Component in Material Compose

A NavigationRailItem always shows text labels (if it exists) when selected. Showing text labels if not selected is controlled by [alwaysShowLabel].

Last updated:

Installation

dependencies {
   implementation("androidx.compose.material:material:1.8.0-alpha04")
}

Overloads

@Composable
fun NavigationRailItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    interactionSource: MutableInteractionSource? = null,
    selectedContentColor: Color = MaterialTheme.colors.primary,
    unselectedContentColor: Color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
)

Parameters

namedescription
selectedwhether this item is selected (active)
onClickthe callback to be invoked when this item is selected
iconicon for this item, typically this will be an [Icon]
modifieroptional [Modifier] for this item
enabledcontrols the enabled state of this item. When false, this item will not be clickable and will appear disabled to accessibility services.
labeloptional text label for this item
alwaysShowLabelwhether to always show the label for this item. If false, the label will only be shown when this item is selected.
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this item. You can use this to change the item's appearance or preview the item in different states. Note that if null is provided, interactions will still happen internally.
selectedContentColorthe color of the text label and icon when this item is selected, and the color of the ripple.
unselectedContentColorthe color of the text label and icon when this item is not selected
by @alexstyl