WideNavigationRailItem

Component in Material 3 Compose

Material Design wide navigation rail item.

It's recommend for navigation items to always have a text label. A [WideNavigationRailItem] always displays labels (if they exist) when selected and unselected.

The [WideNavigationRailItem] supports two different icon positions, top and start, which is controlled by the [iconPosition] param:

• If the icon position is [NavigationItemIconPosition.Top] the icon will be displayed above the label. This configuration should be used with collapsed wide navigation rails.
• If the icon position is [NavigationItemIconPosition.Start] the icon will be displayed to the start of the label. This configuration should be used with expanded wide navigation rails.

However, if an animated item is desired, the [iconPosition] can be controlled via the expanded value of the associated [WideNavigationRail]. By default, it'll use the [railExpanded] to follow the configuration described above.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.compose.material3:material3:1.4.0-alpha02")
}

Overloads

@ExperimentalMaterial3ExpressiveApi
@Composable
fun WideNavigationRailItem(
    selected: Boolean,
    onClick: () -> Unit,
    icon: @Composable () -> Unit,
    label: @Composable (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    railExpanded: Boolean = false,
    iconPosition: NavigationItemIconPosition =
        WideNavigationRailItemDefaults.iconPositionFor(railExpanded),
    colors: NavigationItemColors = WideNavigationRailItemDefaults.colors(),
    interactionSource: MutableInteractionSource? = null,
)

Parameters

name	description
selected	whether this item is selected
onClick	called when this item is clicked
icon	icon for this item, typically an [Icon]
label	text label for this item
modifier	the [Modifier] to be applied to this item
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.
railExpanded	whether the associated [WideNavigationRail] is expanded or collapsed
iconPosition	the [NavigationItemIconPosition] for the icon
colors	[NavigationItemColors] that will be used to resolve the colors used for this item in different states. See [WideNavigationRailItemDefaults.colors]
interactionSource	an 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.