by @alexstyl
✉️ Leave your feedback

← Back to Compose Multiplatform

NavigationRailItem

Component
in
Compose Multiplatform
. Since 1.3.0-beta01

Overview

Examples

Community Notes

Video

Material Design navigation rail item.

A NavigationRailItem represents a destination within a NavigationRail.

Navigation rails provide access to primary destinations in apps when using tablet and desktop screens.

The text label is always shown (if it exists) when selected. Showing text labels if not selected is controlled by alwaysShowLabel.

@param selected whether this item is selected @param onClick called when this item is clicked @param icon icon for this item, typically an Icon @param modifier the Modifier to be applied to this item @param enabled controls the enabled state of this item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services. @param label optional text label for this item @param alwaysShowLabel whether to always show the label for this item. If false, the label will only be shown when this item is selected. @param colors NavigationRailItemColors that will be used to resolve the colors used for this item in different states. See NavigationRailItemDefaults.colors. @param interactionSource the MutableInteractionSource representing the stream of Interactions for this item. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this item in different states.

Overloads

@Composable
fun NavigationRailItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    label: @Composable (() -> Unit)? = null,
    alwaysShowLabel: Boolean = true,
    colors: NavigationRailItemColors = NavigationRailItemDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
)

Parameters

NameDescription
selectedwhether this item is selected
onClickcalled when this item is clicked
iconicon for this item, typically an Icon
modifierthe Modifier to be applied to this item
enabledcontrols the enabled state of this item. When false, this component will not respond to user input, and it will appear visually disabled and 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.
colorsNavigationRailItemColors that will be used to resolve the colors used for this item in different states. See NavigationRailItemDefaults.colors.
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this item. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this item in different states

@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 = remember { MutableInteractionSource() },
    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.
interactionSourcethe MutableInteractionSource representing the stream of Interactions for this NavigationRailItem. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this NavigationRailItem in different Interactions.
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 selecte
Previous ComponentNavigationRail
Next ComponentOutlinedButton